Visual Studio Codeのファイルツリー(エクスプローラー)のフォントを変更する

VSCodeのファイルツリーのフォントが気に食わなかったので変更したのでメモしておく。 設定ファイルではエディターのFontFamilyは変更できるが、サイドバーのFontFamilyは変更できないようであった。

vscode-custom-css拡張をインストールする

github.com

カスタムCSSを適応することができる拡張機能があるので、まずこれをインストールする。 VSCodeの拡張機能検索から、vscode-custom-css を検索し、インストール、再起動。

適応するカスタムCSSファイルを作成する

今回はファイルツリーのファイル名のフォントと、エディターで開いているファイル名のフォントを変更する。 下記の内容のファイルを ~/.vscode/css/tree.css として保存する

.sidebar .explorer-viewlet .label-name,
.editor .title .label-name {    
    font-family: "Monaco" !important;
    font-size: 11px !important;
}

vscode-custom-cssを有効化する

ユーザ設定に以下を追加する

    "vscode_custom_css.imports": [
        "file:///Users/semenov/.vscode/css/tree.css"
    ]

その後、Shift+Command+Pを押して、 Enable Custom CSS & JS を選択。そしてVSCodeを再起動する。 再起動後、「VSCodeが壊れているかも」というメッセージが出るか、問題ないので二度と表示しないようにしてOK。

以上でファイルツリーのフォントが代わっているはず。 ちなみにCSSを更新した後は、 Reload Custom CSS & JS を選択し、VSCodeを再起動する必要がある。

参考: 当該CSSセレクタを見つけたり、テストする方法

ヘルプ => 開発者ツールの切り替え をすると、Developer Toolsが出るので、普通のWeb開発と同じように目的のDOM要素を見つけてCSSを変更したりしてみると良い。