【拡張機能】VSCodeのUIを等幅フォントで美しくしたら開発が100倍楽しくなった話【Custom UI Style】

はじめに

「VSCodeのサイドバーとかメニューとか、デフォルトのフォントが等幅じゃないの、気持ち悪くない？」 って思うことありませんか？

私はあります！！
ファイル名が微妙にズレてたり、エクスプローラーの見た目が揃ってなかったりすると、なんか集中できないんですよね。あとはUIの見た目好みじゃないなーとｋ

README.ja.mdとREADME.ko.mdがちょっとずれるのが嫌。
ログで連番ファイルとかだともっと嫌になりやすい。

そんな小さなストレスを解消すべく、VSCodeのエディタ以外の部分（UI全体）のフォントを、自分好みの等幅で美しいフォントに変更する挑戦をしてみました。

この記事を読めば、あなたも自分の好きなフォント・CSSでVSCodeをドレスアップできるはず！

この記事でできる・わかること

• VSCodeのUIフォントを好きなフォントに変更する方法
• 拡張機能 「Custom UI Style」 の使い方と設定手順
• 開発者ツールを使ったカスタムCSSの書き方
• ハマりがちなポイントとその解決策

記事の対象者

• VSCodeを使っていて見た目をカスタマイズしたい人
• CSSや設定ファイルいじりに抵抗がない人
• 「デフォルトの見た目に飽きた！」って感じてる人

動作環境

• VSCode: バージョン1.87
• 拡張機能: Custom UI Style v0.5.4
• 設定ファイル: settings.json
• スキル: 基本的なCSSの理解（セレクタとかfont-sizeくらい分かればOK）

---

先に結論

これが

こうなる

等幅じゃないフォントにモヤモヤ

サイドバーでファイル名が並ぶと、微妙にズレてたり、
「エクスプローラー」ってタイトルの見た目がなんかチグハグだったり。

コードを書くエディタ部分は等幅でバッチリなのに、UI部分がそうじゃないって、デザインの統一感が崩れてる気がして我慢ならなかったんです。

最初は「設定で変えられるでしょ？」って軽い気持ちでVSCodeのsettings.jsonを開いてみました。

エディタ部分のフォントは簡単に変えられますが、サイドバーとかメニューとかのUI部分はまるで手つかず。
標準設定じゃ無理っぽいので、拡張機能を探します。

好きなフォント :UDEV Gothic JPDOC ←全部これにしたい。おすすめです。
Hackgenも良いですよね

拡張機能探しの旅と「Custom UI Style」への着陸

VSCodeのマーケットプレイスで「UI font」とか「customize UI」で検索しまくって、最初に見つけたのが「Customize UI」って拡張機能。

でも、調べてみると、近年のVSCodeのアップデートで破壊的変更が入って使えなくなってたみたい。がっかりしたけど、ここで諦めるわけにはいかない。

そこで、同じ悩みを持つ人の記事を発見したので参考に。

最終的に「Custom UI Style」に落ち着いたってことなので早速VSCodeの拡張機能タブから検索してインストール。※設定変更時は管理者権限でVSCodeを開く必要があるかも。

最初の設定: 大好きなフォントをぶち込む

「Custom UI Style」 の設定は簡単で、拡張機能設定からできます。今回はUI全体のフォントを変えたかったので、

「Font: Sans Serif (すべてのプロファイルに適用)」 って項目に、私の大好きな等幅フォント「UDEV Gothic JPDOC」を入力してみた。設定画面はこんな感じ。

んで、VSCodeを再起動すると…

サイドバーもメニューも「UDEV Gothic JPDOC」に変りました！

等幅で美しい見た目でテンション上がったけど、ちょっと待てよ。
サイドバーの文字サイズが小さすぎて見づらい…。

文字サイズ問題に立ち向かう

我慢しようかとも思いましたが、やっぱり小さい文字は目に悪いし、気持ち悪いままなのは嫌です。

そこで「Custom UI Style」の公式リポジトリ（GitHub）のREADMEをチェック。どうやらsettings.jsonにカスタムCSSを書けば色々いじれるらしい。

でも、フォントサイズを直接変える設定は見当たらない。issueを漁ることに。

「size」で検索したら、Issue #33でフォントサイズをいじってる話題を発見！サイドバーじゃない部分の話だったけど、「CSSでなんとかなるならいけるんじゃね？」って希望が見えてきました。

開発者ツールで要素を特定してCSSを書きまくる

VSCodeの 「ヘルプ → 開発者ツールを切り替え」で デベロッパーツールを起動 。
サイドバーを右クリックして要素を調べてみたら、.monaco-workbenchってクラスが全体を包んでるっぽいことが分かりました。

まずはサイドバーのファイル名とかフォルダ名を大きくしようと、CSSをsettings.jsonに追加。

settings.json

"custom-ui-style.stylesheet": {
    ".monaco-workbench .sidebar .explorer-viewlet .monaco-list .monaco-list-row": {
        "font-size": "16px !important"
    }
}

再起動したら…成功！ファイル名がいい感じに大きくなりました！
でも、「エクスプローラー」とかフォルダのタイトル部分はまだ小さいまま。

ワイルドカードでゴリ押し解決

タイトル部分のクラスを特定しようとしたけど、.monaco-workbenchからtitleまでの階層が深すぎて挫折しかけました。
そこでissue #33をもう一度見直したら、*（ワイルドカード）を使ってる例があったのを思い出しました。「これ使えるんじゃね？」って試しにこんな感じで。

"custom-ui-style.stylesheet": {
    // ファイル名やフォルダ名のフォントサイズ
    ".monaco-workbench .sidebar .explorer-viewlet .monaco-list .monaco-list-row": {
        "font-size": "16px !important"
    },
    // エクスプローラーなどタイトルラベルのフォントサイズ
    ".monaco-workbench * .title-label h2": {
        "font-size": "14px !important"
    },
    // サイドバーのフォントサイズ
    ".monaco-workbench * .title": {
        "font-size": "14px !important"
    }
}

再起動したら…キタ！サイドバー全体がちょうどいいサイズ感に！
「UDEV Gothic JPDOC」の等幅の美しさがフルに活きて、見た目が完璧に整った瞬間でした。ファイル名は等幅がやっぱり好き。タイポも見つけやすい気がする。

(おまけ)ハマった罠とその脱出法

試行錯誤してるときに1つ罠にハマりました。settings.jsonを頻繁に編集して再起動してたら、なぜか再起動ダイアログが出なくなって、反映されない状態に。焦りましたけど、Ctrl+Shift+P→Custom UI Style reloadで反映・復活します。

結論

VSCodeのUIフォントを「UDEV Gothic JPDOC」に変えて、サイドバーの文字サイズも自分好みに調整できました。

最初は「等幅じゃないのが気持ち悪い」ってモヤモヤから始まりましたが、拡張機能で見た目も気分もスッキリする開発環境を手に入れられたので満足しています。

あなたも好きなフォントでVSCodeをカスタマイズして、毎日使うツールをちょっと楽しくしてみませんか？

他の機能として背景に画像を置いたりできるみたいです。CSSをオーバーライドするのでなんでもできるともいえる。

参考資料