beautify-console: VS Code のビジュアル美化パネル

beautify-console は VS Code のビジュアル美化パネルだ。普段は settings.json を手で書き換えたり、いくつもの拡張機能に散らばっていた外観設定を一つの GUI にまとめ、クリックだけで変更できるようにする。フォント、レイアウト、エディタ、アニメーション、角丸、テーマ、さらに複数領域の背景画像まで、すべて一か所で調整する。

何を調整できるか

フォントはシステムにインストール済みのプログラミングフォントを自動スキャンし、チェックすればそのまま使える。フォントサイズ、行の高さ、太さ、リガチャも隣に並ぶ。エディタは、スムーズカーソル、スムーズスクロール、括弧の色付け、インデントガイド、スティッキースクロール、ミニマップといった散らばりがちなオプションを一か所に集約する。アニメーションは 5 段階(デフォルト、スムーズ、バウンス、華やか、オフ)で、下層は適当に入れた数値ではなく、調整済みの spring イージングカーブ一式で動く。角丸はスライダー一つで UI 全体を統一的に管理する。

背景画像に一番手をかけている。VS Code は公式にはこれをサポートしていない。ここではエディタ、サイドバー、パネル、全画面の四領域に分け、それぞれ個別に画像を設定する。ダークテーマでは mix-blend-mode: screen で合成し、画像がコードをぼやけさせないようにしつつ、複数枚をタイマーでフェードイン付きに切り替える輪番表示にも対応する。設定した画像はユーザーディレクトリへ自動でコピーされるので、元の画像を削除しても影響しない。設定一式はインポート/エクスポートでき、一度整えたセットを共有したり、マシンを移す際に取り込み直したりできる。

落とし穴の話

この手の美化は本質的に VS Code のコアファイルに CSS を注入する行為で、非公式な手段にあたる。beautify-console は自身でコアファイルを触らず、Custom UI Style を注入レイヤーとして借り、インストール時に自動でそれを入れるよう促す。背景セレクタは shalldie/vscode-background の考え方を参考にした。

代償は二つ。起動時に「インストールが破損しているようです」という黄色いバーが出ることがあるが、「今後表示しない」を押せばいい。そして VS Code のアップデート後は注入したスタイルが公式ファイルに上書きされて効かなくなる。Custom UI Style: Reload を一度走らせて再注入すれば復帰する。この道は避けられないので、使う前に承知しておくこと。

インストールは Releases から .vsix をダウンロードするか、clone して install.ps1 を実行する。インストール後、Ctrl+Shift+P で「美化: 打开控制台」と入力すれば開く。リポジトリは https://github.com/dwgx/beautify-console にある。自由に取って改変してほしい。