VS Codeの検索窓の文字サイズを大きくする方法

はじめに

VS Codeのエディターの右上にある検索窓の文字サイズを大きくする方法のメモです。

検索窓を大きくしたい

• VS Code エディターの右上にある検索窓はあまり広くないので、細かな記号などが見分けにくいことがあります。
• 左端をドラッグすることで入力欄の幅を拡げられますが、高さのほうはドラッグでは変更できません。ここの文字サイズを変える設定項目も見当たりません。
• Ctrl + + でエディタ全体をズームアップできますが、全体ではなく検索窓だけを大きくしたいです。
• settings.json に書き込むことで直接文字サイズを変更する設定IDは見つけられませんでした。
• 以下のCSSファイルで文字サイズなどのスタイルを変更できますが、これはVS Codeのコア部分を構成するファイルなので、アップデート時に上書きされてしまう可能性があるようです。

  [VS Codeインストール先フォルダ]\resources\app\out\vs\workbench\workbench.desktop.main.css

Custom CSS and JS Loader 拡張機能を利用する

以上を踏まえて現時点では、CSS記述でエディターをカスタマイズする Custom CSS and JS Loader という拡張機能を利用して文字サイズを変えています。設定は個別に保存されるのでアップデートで消えてしまうことはありません。

文字サイズとフォントの設定方法

1. VS Code の拡張機能タブで Custom CSS and JS Loader を検索し、インストールして有効にします。
2. 新規ファイルに以下の内容を記述し、 .css 拡張子をつけて適当な場所に保存します。ついでにフォントも変えておきました。

   .monaco-editor .find-widget .monaco-findInput .input {
       font-family: 'UDEV Gothic 35';  /* 検索窓のフォント */
       font-size: 18px;  /* 検索窓のフォントサイズ */
   }

3. VS Codeのエディタ画面左下にある歯車アイコンメニューから 「設定」 を選択し、設定画面右上の 「設定（JSON）を開く」 アイコンをクリックして settings.json を開きます。
4. settings.json に以下の記述を追加します。

   "vscode_custom_css.imports": ["file:///.cssファイルのパス"]

   //例
   "vscode_custom_css.imports": ["file:///C:/Users/name/Documents/custom.css"]

5. メニューの 「表示 ＞ コマンドパレット」 で Enable Custom CSS and JS を検索して実行してから、 VS Code を再起動します。
6. 変更前と変更後の検索窓の比較です。細かい記号も見やすくなりました。

おわりに

以後はCSSファイルを編集するだけで文字サイズやフォントなどの変更ができます。実際、上記の例ではちょっと大きすぎたため後で調整しました。編集を加えたときは、コマンドパレットで Reload Custom CSS and JS を実行してから VS Code を再起動すると表示に反映されます。

• VS Code
• 開発