VSCode 1.39以降のUIフォントをYu Gothic UI以外に変更する

コードエディタは VSCode (Visual Studio Code) をいつも愛用していますが、いつものように VSCode を起動したら

「UI フォントが Yu Gothic UI になっていた」

UI フォントを設定できる項目を探しましたが、残念ながら見当たりません。
Yu Gothic UI が細くて見づらいし汚いししぬほど嫌い(個人の感想です)で Windows10 の UI フォントも Meiryo UI に変えているので、ここは意地でも戻したいところです。

ちなみに Windows7・Windows 8.1 環境だと Yu Gothic UI が入っていないためデフォルトの UI フォントは Meiryo UI になります
Sponsored Link

前提

VSCode は HTML・CSS・JavaScript (Node.js) で構成された Web ベースの Electron アプリです。
ほぼ全ての UI が HTML と CSS で作られているため、VSCode 内の圧縮された CSS ファイル内の font-family を書き換えれば UI フォントを変更できます。

Electron は Chromium (Chrome の OSS 版) と Node.js を組み合わせ、Web 技術でデスクトップアプリを作ることができる実行フレームワークです
クロスプラットフォームなアプリを比較的容易に作ることができる反面、実態は 各アプリ専用の Chrome をインストールしているのとさほど変わらないため動作が重くなりやすく、配布サイズも大きいという欠点があります
Discord や Slack のデスクトップアプリも Electron で構築されています

変更方法

C:\(VSCodeをインストールしたフォルダ)\resources\app\out\vs\workbench\workbench.desktop.main.css を(それこそ VSCode とかで)開きます。

Web 界隈の方であれば一度は見たことのあるであろう余計な改行やスペースが圧縮された CSS ファイルですが、VSCode であれば [編集]→[置換] より、上のテキストボックスに「Yu Gothic UI」、下のテキストボックスに「メイリオ」と入力し、[すべて置換] ボタンで置換できます。
下のテキストボックスに任意のフォント名を入力することで、メイリオ以外の任意のフォントにも変更できます(フォント名のタイプミスに注意)。

その後、Ctrl + S か [ファイル]→[保存] で保存し、VS Code を一旦閉じてもう一度開きます。

こんな感じで UI フォントが指定したフォント(今回はメイリオ)に戻っていれば成功です。

「Code インストールが壊れている可能性があります。再インストールしてください。」という警告が出ますが、無視して右上の設定アイコンから「再度表示しない」をクリックすると、次のアップデートをインストールするまでは出なくなります。

また、タイトルに「Visual Studio Code [サポート対象外]」と表示されます(本体に変更加えたらサポートしないよってことなのかな)。
できれば本体のファイルに変更を加えずにどうにかできる方法があればいいのですが、今のところなさそう…

自動化する

ただし、VSCode をアップデートすると先ほど置換した CSS ファイルが新しいもので上書きされるため、アップデートの度に同じ手順を繰り返さなければいけません。
自動アップデートを止めることもできますが、機能追加や改善も多く含まれているためおすすめしません。

2020/08/19 追記: v1.48 になってから一部のコンテキストメニューが Yu Gothic UI になるようになってしまったため、workbench.desktop.main.css 以外も置換するように更新しました

毎回深い階層にある CSS 内の文字列を手動で置換するのも面倒なので、簡単な Python スクリプトを書きました。
VSCode を一旦閉じ、設定箇所のフォントと VSCode がインストールされている場所を変えた上で、コマンドプロンプトとかから

python VSCodeUIFontChanger.py

と実行します(Python 3 がインストールされていることが前提)。

その後 VSCode を起動すると、UI フォントが VSCodeUIFontChanger.py で指定したフォントになっているはずです。
ターミナル開いて実行するのも面倒だ、という場合は

@echo off
python %~dp0\VSCodeUIFontChanger.py

って感じでバッチを書いて VSCodeUIFontChanger.py と同じフォルダに VSCodeUIFontChanger.bat のように置いておくと、そのバッチをクリックするだけで指定したフォントへと変更できます。

バッチファイルの改行コードは CRLF じゃないとうまく動かないかも…?
%~dp0\ はバッチファイルのあるフォルダを表す変数だったはず

1ヶ月に1回くらいしか実行する機会はないと思いますが、いざアップデートが来たときにちょっとした手間を減らせると思います。

Sponsored Link
Sponsored Link
Web
tsukumiをフォローする
Sponsored Link
つくみ島だより

コメント