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

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

![Before-After](https://qiita-image-store.s3.amazonaws.com/0/78881/4fc44276-e9e4-7e50-5726-dc1d9bb4f15c.png)

#**※最新のバージョン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を開く](https://qiita-image-store.s3.amazonaws.com/0/78881/e48665a5-0820-b4d2-7944-0014ecdf2800.png)

すると、左側に「Default Settings」の内容が、右側に「**settings.json**」の中身が表示されます。
![setting.jsonのオープン](https://qiita-image-store.s3.amazonaws.com/0/78881/c828eaa6-f4d6-e3dd-a7d9-a298992e44bf.png)

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

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

>※JSONファイルでは、Visual Studio Codeのコード補完機能が利用できます。
>![c1-4.png](https://qiita-image-store.s3.amazonaws.com/0/78881/c05fd3dd-87d8-f993-cec3-99987e7d64c2.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](https://qiita-image-store.s3.amazonaws.com/0/78881/dde4eafa-afb1-f665-c6d1-65765db8bab8.png)

```css: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](https://qiita-image-store.s3.amazonaws.com/0/78881/0f7ffa76-192b-d9d0-e7bf-b0602cc26e4f.png)
>***
>※バージョン0.9.1以降では、CSSが最適化されているので少々見づらいですが、ここにあります。「**.monaco-shell{**」で検索すると見つかりやすいです。
![vsc-090.PNG](https://qiita-image-store.s3.amazonaws.com/0/78881/587a9f4c-1f61-ff96-b1c9-b11fa96d15f5.png)

```css: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](https://qiita-image-store.s3.amazonaws.com/0/78881/5ec27529-946e-34e8-aa90-8a1981a5ebe8.png)

```css: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](https://qiita-image-store.s3.amazonaws.com/0/78881/a1a37610-0077-5493-3c75-162f6a2d027b.png)

```css: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"}
```

```css: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）](https://github.com/adobe-fonts/source-han-code-jp)」を追加しています。フォントのサイズを変えたい時は「**font-size**」の値を変更します。

>※「.monaco-editor, .monaco-editor.inputarea」はこのあたりに記述されています。（画像はVer. 0.3.0のものです）
>![c1-5.png](https://qiita-image-store.s3.amazonaws.com/0/78881/94996b24-14db-5434-feb8-3e31035b3ff5.png)

```css: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を再起動します。