Visual Studio Codeのフォント設定について

Windowsの人の中には、vscodeで日本語を含んだファイルを開いた直後に「vscode 中華フォント 修正」でぐぐったり、 「コルタナさん！コード！中華！！」と叫んだりした人が少なからずいるのではないかと思うんですよ。

この問題の解決法については既に分かりやすくまとめられている方がいます。 http://qiita.com/rinne_grid/items/fd9161a9bb9cb22c2328

他にもいろいろありますが、とりあえず上記が鉄板でしょう。大変丁寧な内容で頭が下がります。

ちなみにこれをやる場合、vscodeを管理者権限で起動するのを忘れずに！

ただ、とりあえずエディタだけ中華が治れば良いという人は、settings.jsonでeditor.fontFamilyをオーバーライドすればそれでOKです。管理者権限も必要ありません。

これも既出の情報。こことか。

さて、ここからがネットで見つけられなかったので自分で調べた内容ですが、中華フォントを治すために日本語フォントだけを新たに指定すると、 欧文フォントも置き換わってしまいます。この場合、欧文フォントはたいてい等幅ではないので、コードがかなり見づらくなってしまいます。

そこで、欧文フォントだけ元に戻したいという話になります。

もう一点、自分の環境（執筆時点で0.10.11）では、上記の対策の後も変換中だけは中華フォントが出てしまっていました。 というわけで、この2つの問題を解決したいと思います。

欧文フォントを元に戻す

しらみつぶしに試したところ、どうやらConsolasがWindows版vscodeで使っている等幅の欧文フォントのようです。 というわけで、settings.jsonでの設定の場合、次のとおりとなります。

 // Controls the font family.
    "editor.fontFamily": "Consolas,Meiryo"

上記はメイリオを日本語フォントに選んだ場合です。

変換中の中華フォントを治す

さて、全体的に変えたい場合は管理者権限でvscodeを起動し、一番最初のリンクにある通りworkbench.main.cssを編集することになります。 リンク先にある通り、バージョンが変わるたびにcssがころころ変わるので柔軟に対応していきましょう。 現在私が使っているバージョン0.10.11では、まあ適当なのですが、こんな感じで一括置換しました。

font-family:Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif;

↓

font-family:Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif,Meiryo;

さらに、最後に以下を追加して変換中と検索フォームをMeiryoにしました。

.monaco-editor.ff.ime-input .inputarea,.monaco-editor.ie.ime-input .inputarea,.monaco-editor.vs-dark.ime-input .inputarea,.monaco-editor.vs-dark.ie.ime-input .inputarea,.monaco-editor.vs-dark.ff.ime-input .inputarea,.monaco-editor.ime-input .inputarea{font-family:Consolas,Meiryo}

このやり方もバージョンが変わると使えなくなる可能性があります。

そうなった場合、面倒ですが

Help > Toggle developer tools

でChromium系ブラウザと同じ開発ツールが出てくるので、これでどの要素のスタイルを変更すれば良いのか地道に調べるしかありません。

虫眼鏡をクリックすれば、マウスオーバーした場所がどの要素なのか調べることができて便利です。

2016/4/19追記

バージョンが変わったので、やり方を変えました。

ver1.0.0.

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

追記する行を以下に修正

.monaco-editor.ff.ime-input .inputarea,.monaco-editor.ie.ime-input .inputarea,.monaco-editor.vs-dark *,.monaco-editor.ime-input .inputarea, input{font-family:Consolas,Meiryo}

• C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\languages\markdown\common\markdown.css

マークダウンのプレビューウィンドウのcssです。bodyのfont-familyに日本語フォント追記しました。

font-family:Segoe WPC,Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif

↓

font-family:Segoe WPC,Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif,Meiryo