Visual Studio Codeでラスタフォント(MS ゴシック等)を使用する

# はじめに
Visual Studio Code(Windows版)のテキストエディタの既定のフォントはConsolasです(日本語はメイリオ)。
コーディングにも向いている等幅フォントらしいですが個人的に...あまり好きではありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/5a41b537-7ffe-2809-286d-55a0e8eb91b8.png)

# Text Editor
見慣れたMS ゴシックに変えてしまいます。

## GUIで設定する場合
**Settings** → **Text Editor** → **Font** → **Editor: Font Family**
(**設定** → **テキスト エディター** → **フォント** → **Editor: Font Family**)

`Consolas, 'Courier New', monospace`
↓
`'MS Gothic', monospace`
に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/7f8d8827-c22d-ca36-79bc-5d118f01f40a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/9e622a0e-8b39-26c5-3c64-04c632ff006b.png)
フォントが大きすぎるので

**Settings** → **Text Editor** → **Font** → **Editor: Font Size**
(**設定** → **テキスト エディター** → **フォント** → **Editor: Font Size**)

`14` → `12` に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/8a016587-4f1f-abbf-c7d6-f29c9416e6a9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/2ebf15fc-3cae-0879-fb7d-11816f3affcd.png)
行間が広いと一度に表示できる行数が少なくなるので

**Settings** → **Text Editor** → **Editor: Line Height**
(**設定** → **テキスト エディター** → **Editor: Line Height**)

`0` → `1` に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/ba882ee4-d9cc-355e-2810-1dbfad31f076.png)

:::note
0から8までの値は、フォント サイズの乗数として使用されます。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/c1d72c2c-d57b-5aef-7c0f-b59522852571.png)
いい感じ

ターミナルのフォントも個別に設定しなければエディタの設定が適用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/7aebc53d-0a27-ed5e-71ec-9d42d228fd35.png)

## settings.json で設定する場合
`%APPDATA%\Code\User\settings.json`を開き、以下の行を追加

```json:settings.json
{
  "editor.fontFamily": "'MS Gothic', monospace",
  "editor.fontSize": 12,
  "editor.lineHeight": 1
}
```

# Debug Console
Debug Consoleは何故かText Editorの設定を適用してくれないので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/07004ea2-7628-ba0b-9ba6-6a73f5f6cca9.png)

## GUIで設定する場合
**Settings** → **Features** → **Debug**
(**設定** → **機能** → **デバッグ**)
- **Console: Font Family**
    - `'MS Gothic', monospace`
- **Console: Font Size**
    - `14` → `12`
- **Console: Line Height**
    - `12`  
    (※こちらは`1`を設定すると1ポイントになってしまいます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/3fbae491-c662-ff88-b907-9f28ee29fd39.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116331/8fc20de4-027a-62d0-31a4-e515dfe34c05.png)
いい感じ！

## settings.json で設定する場合
`%APPDATA%\Code\User\settings.json`
以下を追加

```json:settings.json
{
  "debug.console.fontFamily": "'MS Gothic', monospace",
  "debug.console.fontSize": 12,
  "debug.console.lineHeight": 12
}
```

# ついでに
私は以下も設定しています。

```javascript:%APPDATA%\Code\User\settings.json
{
  "security.workspace.trust.enabled": false, // 正直、制限モードはうっとおしい
  "window.titleBarStyle": "native", // タイトルバーが無いとドラッグしにくくない？
}
```

`security.workspace.trust.enabled`については効果を理解の上、くれぐれも自己責任でお願いします。

https://code.visualstudio.com/docs/editor/workspace-trust