Visual Studio Codeのフォント設定: Ubuntu

ローカルのUbuntu 16.04 LTS上にPHPの開発（勉強）環境を構築しました。エディターは何にしようか？迷っていたタイミングで、Visual Studio Codeバージョン1.0<<https://www.visualstudio.com/ja-jp/products/code-vs.aspx>>がリリースされました。Windows/Linux/OS X対応のマルチプラットフォームで今回の環境用エディターに採用決定。PHP、HTMLはIntelliSenseによるコードヒントがあって、とっても便利ですね。
![vsc_01.png](https://qiita-image-store.s3.amazonaws.com/0/119358/662f55cb-591a-5c8f-407b-1ae9d3a3c826.png)

今回は、ネットにも情報が少なく、私がはまったフォント周りについてまとめます。

----
##・「ユーザー設定」
設定は 基本設定>ユーザー設定 で開くsettings.jsonファイルに記述します。
![vsc_02.png](https://qiita-image-store.s3.amazonaws.com/0/119358/ac3342b3-6e47-7610-fd0e-f5c938c4ccbe.png)
このように真ん中のペインに表示される既存の設定（上書きできません）を参考に、必要な設定をsettings.jsonファイルに書きます。
フォントの制御は "editor.font" で行います。

###【事前準備】
フォントの名称はしっかり記述しないと、設定できません。最初に自分のマシンにインストールされているフォントの名称を把握して、検討しましょう。
![vsc_09.png](https://qiita-image-store.s3.amazonaws.com/0/119358/b554d3b7-06c6-d0ca-cea6-19699eeab615.png)

今回は、下記のようにしてインストールされているフォントリストを取得し、フォントファミリーorフォント名、ウェイト名をコピーして使いました。同じフォントファミリーでも、Bold（太い書体）、Regular（レギュラー）、Light（細め）などのウェイトがあるので、自分が意図したフォントが表示されるよう、しっかり記述しましょう。

```shell-session
~$ fc-list
/home/bellota/.fonts/SourceCodePro-Bold.otf: Source Code Pro:style=Bold
/home/bellota/.fonts/SourceCodePro-Regular.otf: Source Code Pro:style=Regular
```


##【フォントサイズを18にしたい場合】
任意の数字を記入します。保存すると、すぐにエディター上に設定が反映されます。

```json:settings.json
// フォントサイズ
{
"editor.fontSize": 18,
}
```


##【フォントを変更したい場合：デフォルトフォントのUbuntuファミリーを指定】
フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。
![vsc_03.png](https://qiita-image-store.s3.amazonaws.com/0/119358/1cb82433-27e3-c8b2-cb8f-dac0ce6a76f1.png)

```json:settings.json
// フォント指定
{
"editor.fontFamily": "Ubuntu"
}
```

##【フォントを変更したい場合：Source Code Proファミリーを指定】
フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。
![vsc_04.png](https://qiita-image-store.s3.amazonaws.com/0/119358/2354e842-f862-6feb-7160-3b4ace7d55f8.png)

```json:settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro"
}
```

##【フォントを変更したい場合：ウェイト別のフォントを指定】
フォントのウェイトを含めた名前を記入します。保存すると、すぐにエディター上に設定が反映されます。このフォントにすると、英数字が極端に細くなっているのが分かります。
![vsc_05.png](https://qiita-image-store.s3.amazonaws.com/0/119358/fd869dfe-c9d1-3808-bea1-39b1dfb22726.png)


```json:settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro ExtraLight"
}
```

##【フォントを変更したい場合：日本語表記用に別なフォントを指定】
英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は TakaoExゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。
![vsc_06.png](https://qiita-image-store.s3.amazonaws.com/0/119358/aab7713c-ecfa-d194-1dba-f3cea310047c.png)

```json:settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro, TakaoExゴシック"
}
```

##【フォントを変更したい場合：日本語表記用に別なフォントを指定】
英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は Takao Pゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。先ほどのTakaoExゴシックと比べると、日本語表字が異なるのが分かりますね。
![vsc_07.png](https://qiita-image-store.s3.amazonaws.com/0/119358/637221d0-6816-b095-0608-7769ecad953e.png)

```json:settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro, Takao Pゴシック"
}
```

##【おまけ：私のお気に入り】
いろいろと表示させてみたところ、私のお気に入りは Source Code Pro MediumとNoto Sans CJK JP Regularの組み合わせになりました。
![vsc_08.png](https://qiita-image-store.s3.amazonaws.com/0/119358/a6e5c4ab-0e30-ba46-0bf2-8d40f1dcc9c7.png)


```json:settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro Medium, Noto Sans CJK JP Regular"
}
```
----

##参考にしたサイト：
・特集：Visual Code早分かりガイド
<<http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html>>

・＠IT：使用可能なフォントを調べるには
<<http://www.atmarkit.co.jp/flinux/rensai/linuxtips/691chkfonts.html>>

・Adobe Soure Code Pro
UIやコーディング環境用に開発されたフォント「Adobe Soure Code Pro」は、GitHubから無償でダウンロードできます。
<<https://github.com/adobe-fonts/source-code-pro/releases/tag/2.010R-ro/1.030R-it>>

・Google Noto Fonts
GoogleとAdobeの共同開発のフォント。世界の多くの言語がコンピューターで問題なく表示されるよう、多くの言語で同じようなスタイルを保ったフォントが制作され、無償で公開されています。私はNoto Sans CJK JPと、日本語フォントを今回設定しました。たくさんのフォントが公開されているので、ダウンロード前に吟味してからインストールしましょう。よくばると、大変な量のフォントがインストールされてしまうので...
<<https://www.google.com/get/noto/>>