Open2
VS Code のサイドバー（エクスプローラー・ファイルツリー）の font-family を変更したい
taichi fukumotoVS Code の サイドバーのフォントって変えられないの？
サイドバーのファイルツリーのフォントが見づらかったので、等幅フォントに変更できないかと思い調査した。
結論を言うと、自己責任にはなるが、拡張機能でフォントを変更することができた。
使用する VS Code の拡張機能はこちら。
参考記事
taichi fukumotoサイドバーのフォントを変更していく
早速フォントを変更していく。手順は、拡張機能の README 通りで上手くった。
1. 拡張機能をインストールする
何はともあれ、拡張機能をインストールする。
2. カスタム CSS ファイルを作成する
インストールした拡張機能によって、VS Code に任意の CSS ファイルを読み込ませることができるようになる。
そのため、読み込ませる CSS ファイルを作成する。
Terminal
# .vscode ディレクトリに styles.css を作成する
$ touch ~/.vscode/styles.css
# VS Code で作成した CSS を開く
$ code ~/.vscode/styles.css
作成した styles.css ファイルに以下の内容を書いた。
~/.vscode/styles.css
.sidebar .explorer-viewlet .label-name,
.editor .title .label-name,
.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label
> .monaco-icon-label-container
> .monaco-icon-description-container
> .label-description,
.search-view .linematch > .match {
font-family: "Fira Code" !important;
}
内容を保存しておく。
3. VS Code の settings.json に設定を書き込む
VS Code の settings.json を開き、以下の設定を追加する
settings.json
{
... ,
"vscode_custom_css.imports": ["file:///Users/ta1fukumoto/.vscode/styles.css"]
}
4. VS Code の再起動
settings.json の設定が完了したら、一度 VS Code を再起動する。
5. CSS ファイルをロードする
コマンドパレット（cmd + shift + P）で「Reload Custom CSS and JS」と検索して、クリックする。
VS Code の右下に、「VS Code を再読み込みしますか？」的なメッセージが表示されるので、クリックして再読み込みする。
以上でサイドバーのフォントが変更されているはず。