2021-03-16

VSCode のエクスプローラペインのフォントを変える

VSCode のファイルツリー (エクスプローラ) ペインのフォントを変更したい。settings.json にはそのものズバリな設定がなく調べた。

be5invis 氏の「Custom CSS and JS Loader」という拡張機能をインストールする。この拡張機能によって、VSCode のあちこちのスタイルを CSS で上書き出来る。

次に、適当なディレクトリに CSS ファイルを作る。以下のフルパスは一例だが、内容は以下のようにしておく。

.monaco-panel-view,
.label-name {
  font-family: "Noto Sans Mono CJK JP" !important;
}

そしたら settings.json に次のような内容を追記する。

{
  "vscode_custom_css.imports": ["file:///Users/Neo/.vscode/styles.css"],
  "vscode_custom_css.policy": true
}

先程作成した CSS ファイルのフルパスを、file:// に繋げて書く。

ココまでやったら VSCode を再起動。エラーが右下に出たら続行〜とする。

コレで、CSS ファイルで指定したフォントが反映されているはずだ。

どんな CSS セレクタでスタイルが指定できるか、というのは、「ヘルプ」→「開発者ツールの切り替え」(MacOS 版の場合) で開発者ツールを開いて調査すると良いだろう。

価格 : 3102円