Help us understand the problem. What is going on with this article?

Visual Studio Codeのエディター部とシェル部のフォントを変えてみよう

More than 3 years have passed since last update.

こんにちはー!ニアです。
今回はVisual Studio Codeのエディター部とシェル部のフォントを変更する方法を紹介していきます。

Before-After

※最新のバージョン1.1.0では、はじめからシェル部に日本語対応フォントが使用されています

2016/5/9(米国時間)にリリースされたVisual Studio Codeバージョン1.1.0では、はじめからシェル部に日本語対応フォントが使用されています。

April 2016 Release
https://code.visualstudio.com/blogs/2016/05/09/April2016Release

Use proper font family for East Asian languages (CJK) #5260 - GitHub
https://github.com/Microsoft/vscode/issues/5260

※なお、バージョン1.1.0でも、バージョン0.10.8や1.0.0とほぼ同じ方法で、シェル部のフォントを変更することができます。

1. エディター部のフォントを変更してみよう

エディター部のフォントを変更する時は、「settings.json」という設定ファイルを編集します。

メニューバーから「File」→「Preference」→「User Settings」を選択します。
setting.jsonを開く

すると、左側に「Default Settings」の内容が、右側に「settings.json」の中身が表示されます。
setting.jsonのオープン

settings.jsonを以下のように編集します。「"editor.fontFamily"」の値にフォント名を追加し、「"editor.fontSize"」の値にフォントのサイズを指定します。ここでは「Source Han Code JP(源ノ角ゴシック Code JP)」を追加し、フォントサイズを14に指定しています。
注:「Defalut Settings」の中身は編集できません。

settings.json
{
    "editor.fontFamily": "源ノ角ゴシック Code JP",
    "editor.fontSize": 14
}

※JSONファイルでは、Visual Studio Codeのコード補完機能が利用できます。
c1-4.png

settings.jsonを上書き保存すると、変更内容が即座に反映されます。

2. シェル部のフォントを変更してみよう(注:非公式なカスタマイズです)

シェル部のフォントを変更する場合、CSSファイルを直接編集する必要があります。

2.1. 最新のバージョン1.1.0~

「[Visual Studio Codeをインストールしたフォルダー]\resources\app\out\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

.monaco-shell:lang(ja)」にある「font-family」の値の先頭に好きなフォントの名前を追加します。ここでは「Meiryo UI」を追加しています。

※「.monaco-shell:lang(ja)」はこのあたりに記述されています。
code110.png

workbench.main.css(Ver.1.1.0~)(※見やすくするため、改行しています)
/* -------- */

/* 14行目にあります。 */
/* デフォルト */
.monaco-shell{ /* 中略 */ }
/* 中国語(簡体字)用 */
.monaco-shell:lang(zh-hans){ /* 中略 */ }
/* 中国語(繁体字)用 */
.monaco-shell:lang(zh-hant){ /* 中略 */ }
/* 日本語用 */
.monaco-shell:lang(ja){
    font-family:Meryo UI,Segoe WPC,Segoe UI,SFUIText-Light,HelveticaNeue-Light,
        Noto Sans,Meiryo,Hiragino Kaku Gothic Pro,Source Han Sans J,Source Han Sans JP,
        Source Han Sans,Sazanami Gothic,IPA Gothic,sans-serif;
}
/* 韓国語用 */
.monaco-shell:lang(ko){ /* 中略 */ }

/* -------- */

workbench.main.cssを保存したら、Visual Studio Codeを再起動します。

2.2. 過去のバージョン

2.2.1. バージョン0.10.6以前

  • バージョン0.5.0以前では、「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\monaco\ui\workbench\native」フォルダーにある「native.main.css」を開きます。

  • バージョン0.7.0では、「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

  • バージョン0.8.0以降では、「[Visual Studio Codeをインストールしたフォルダー]\resources\app\out\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

※[ユーザー名]はVisual Studio Codeをインストールした時のユーザー名、[app-x.x.x]はVisual Studio Codeのバージョン(例:app-0.3.0)です。

.monaco-shell」にある「font-family」の値の先頭に好きなフォントの名前を追加します。ここでは「Meiryo UI」を追加しています。

※「.monaco-shell」はこのあたりに記述されています。(画像はVer. 0.3.0のものです)
c1-7.png


※バージョン0.9.1以降では、CSSが最適化されているので少々見づらいですが、ここにあります。「.monaco-shell{」で検索すると見つかりやすいです。
vsc-090.PNG

native.main.css(~Ver.0.5.0)、workbench.main.css(Ver.0.7.0~)
/* -------- */

.monaco-shell {
    height: 100%;
    width: 100%;
    color: #6C6C6C;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Meiryo UI", "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
    font-size: 11px;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

/* -------- */

native.main.cssもしくはworkbench.main.cssを保存したら、Visual Studio Codeを再起動します。

2.2.2. バージョン0.10.8以降

「[Visual Studio Codeをインストールしたフォルダー]\resources\app\out\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

.monaco-shell」にある「font-family」の値の先頭に好きなフォントの名前を追加します。ここでは「Meiryo UI」を追加しています。

※「.monaco-shell」はこのあたりに記述されています。「Segoe WPC,Segoe UI」で検索すると見つかりやすいです。
vsc10-8.PNG

workbench.main.css(Ver.0.10.8~)(※見やすくするため、改行しています)
/* -------- */

/* 14行目にあります。 */
.monaco-shell{
    height:100%;
    width:100%;
    color:#6c6c6c;
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:Meiryo UI,Segoe WPC,Segoe UI,SFUIText-Light,HelveticaNeue-Light,sans-serif;
    font-size:11px;
    -webkit-user-select:none;
    -ms-user-select:none;
    -moz-user-select:-moz-none;
    -o-user-select:none;
    user-select:none
}

/* -------- */

workbench.main.cssを保存したら、Visual Studio Codeを再起動します。

3. おわりに

いかがでしたか。

自分好みのフォントに設定して、快適なコーディングを!
それでは、See you next!

Ex. アーカイブ

過去のバージョン向けに紹介していた方法をここに残しています。

Ex-1. デバッグウィンドウやデバッグコンソール(Ver. 0.8.0~)のフォントを変更

デバッグウィンドウやデバッグコンソールに表示される、ダブルクォーテーションで囲まれた値(文字列)のフォントを変更する時は、「.monaco-workbench .monaco-tree-row .expression,.monaco-workbench .repl .repl-input,.monaco-workbench .repl .surveyor」にある「font-family」の値の先頭に好きなフォントの名前を追加します。ここでは「Meiryo UI」を追加しています。

c1-9.png

workbench.main.css(Ver.0.10.6~)
.monaco-workbench .monaco-tree-row .expression,.monaco-workbench .repl .repl-input,.monaco-workbench .repl .surveyor{font-family:"Meiryo UI",Monaco,Menlo,Consolas,"Droid Sans Mono",Inconsolata,"Courier New",monospace,"Droid Sans Fallback"}
native.main.css(~Ver.0.5.0)、workbench.main.css(Ver.0.7.0~)
.monaco-workbench .monaco-tree-row .expression > .value {
    margin-left: 10px;
    padding: 0 2px;
    font-family: "Meiryo UI", Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
    font-size: 11px;
}

native.main.cssもしくはworkbench.main.cssを保存したら、Visual Studio Codeを再起動します。

※バージョン0.10.8以降では、シェル部のフォントを変更することで反映されます。

Ex-2. CSSファイルを直接編集してエディター部のフォントを変更(注:非公式なカスタマイズです)

実は、CSSファイル(native.main.css)を編集することで、エディター部のフォントを変更することもできます。

  • バージョン0.5.0以前では、「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\monaco\ui\workbench\native」フォルダーにある「native.main.css」を開きます。

  • バージョン0.7.0では、「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

  • バージョン0.8.0以降では、「[Visual Studio Codeをインストールしたフォルダー]\resources\app\out\vs\workbench」フォルダーにある「workbench.main.css」を開きます。

※[ユーザー名]はVisual Studio Codeをインストールした時のユーザー名、[app-x.x.x]はVisual Studio Codeのバージョン(例:app-0.3.0)です。

.monaco-editor, .monaco-editor.inputarea」にある「font-family」の値の先頭に、好きなフォントの名前を追加します。ここでは「Source Han Code JP(源ノ角ゴシック Code JP)」を追加しています。フォントのサイズを変えたい時は「font-size」の値を変更します。

※「.monaco-editor, .monaco-editor.inputarea」はこのあたりに記述されています。(画像はVer. 0.3.0のものです)
c1-5.png

native.main.css(~Ver.0.5.0)、workbench.main.css(Ver.0.7.0~)
/* -------- */

.monaco-editor, .monaco-editor .inputarea {
    font-family: "源ノ角ゴシック Code JP", Monaco, Menlo, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
    font-size: 14px;
    line-height: 19px;
    color: #333;

    background: #fffffe; 
}

/* -------- */

native.main.cssもしくはworkbench.main.cssを保存したら、Visual Studio Codeを再起動します。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away