気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

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

情報をQiitaに集約しました

qiita.com

以下は古い情報

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

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

対象バージョン

対象ファイル:

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

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

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

1. 以下のキーワードで検索

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

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

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

.monaco-editor.ime-input .inputarea {
    font-family: "好きなフォント";
}
  • 変更前 f:id:rinne_grid2_1:20151126064544p:plain

  • 変更後(Ricty Diminishedに変わっている!) f:id:rinne_grid2_1:20151126064554p:plain

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

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

gist.github.com

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

これでおそらく中華フォントとさよならできます。*1

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

自分用に適当に追記したので、何らかの問題があるかもしれません。

利用時にはご注意ください。

*1:エディタ部分のフォントについては、 settings.jsonのeditor.fontFamilyの値を変更。