Visual Studio Codeの中華フォントを変更する

  • 14
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

Visual Studio Codeの使い勝手はいいんだけど、入力中のテキストボックスや、
Tree-View、上のタブっぽいところ等々、中華フォントが混ざってて嫌だ・・・。

ということで、CSSを直接書き換えることにしました。

対象ファイル:

{インストール先}\resources\app\out\vs\workbench\workbench.main.css

デフォルトのインストール先だと、C:\Program Files (x86)直下

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css

0.10.5以前

1. 以下のキーワードでworkbench.main.cssを検索

monaco-shell{height:100%;width:100%;color:#6C6C6C;

検索後、
一番最初に出てきたfont-familyの中身を削除し、好きなフォントに書き換え

2. workbench.main.cssの一番最後の行に以下を追記

.monaco-editor.ime-input .inputarea {
    font-family: "好きなフォント";
}

0.10.6以降

1.以下のキーワードでworkbench.main.cssを検索し、好きなフォントに置き換え

検索ワード:

Segoe UI",SFUIText-Regular,HelveticaNeue,sans-serif,"Droid Sans Fallback

置換後:

好きなフォント

2. workbench.main.cssの一番最後の行に以下を追記

.monaco-editor.ime-input .monaco-shell input {
    font-family: "好きなフォント";
}
.monaco-editor.ime-input .inputarea {
    font-family: "好きなフォント";
}

0.10.8以降

1.以下のキーワードでworkbench.main.cssを検索し、好きなフォントに置き換え

検索ワード:

Segoe UI Semibold,Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif;

置換後:

好きなフォント

2.以下のキーワードでworkbench.main.cssを検索し、好きなフォントに置き換え

検索ワード:

Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif

置換後:

好きなフォント

3. workbench.main.cssの一番最後の行に以下を追記

.monaco-editor.ime-input .monaco-shell input {
    font-family: "好きなフォント";
}
.monaco-editor.ime-input .inputarea {
    font-family: "好きなフォント";
}
  • 変更前
    20151126064544.png

  • 変更後(Ricty Diminishedに変わっている!)
    20151126064554.png

直接ファイルを書き換えるのが面倒な場合向け

書き換え用のテンプレートファイルをGistに置いときました。

  1. リンク先のCSS(workbench.main.css)をダウンロード
  2. {{YOUR SETTING FONT}}で検索して、該当する2箇所を好きなフォント名に置き換え
  3. 保存してVisual Studio Codeを起動

これでおそらく中華フォントとさよならできます。((エディタ部分のフォントについては、
settings.jsonのeditor.fontFamilyの値を変更。))

  • 以下のフォントが中華フォントではなく、指定のフォントになります
    • Tree-View
    • 上部のタブっぽいエリア
    • 入力中のテキストボックス(IME?)のフォント

自分用に適当に追記したので、何らかの問題があるかもしれません。
もし利用される場合にはご注意ください。

なお、Visual Studio Codeのアップデート(マイナーバージョン等)が実施された場合は、
改めてworkbench.main.cssファイルを置き換える必要があります。

* 2015/12/21 デフォルトのインストール先が誤っていたので訂正
* 2015/12/27 0.10.6以降のバージョン用にテンプレートと手順を追加
* 2016/02/28 nekko1119さんのご報告内容を反映(0.10.8で置換するフォントが変更となった)