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

ローカルのUbuntu 16.04 LTS上にPHPの開発（勉強）環境を構築しました。エディターは何にしようか？迷っていたタイミングで、Visual Studio Codeバージョン1.0<>がリリースされました。Windows/Linux/OS X対応のマルチプラットフォームで今回の環境用エディターに採用決定。PHP、HTMLはIntelliSenseによるコードヒントがあって、とっても便利ですね。

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

---

##・「ユーザー設定」
設定は 基本設定>ユーザー設定 で開くsettings.jsonファイルに記述します。

このように真ん中のペインに表示される既存の設定（上書きできません）を参考に、必要な設定をsettings.jsonファイルに書きます。
フォントの制御は "editor.font" で行います。

###【事前準備】
フォントの名称はしっかり記述しないと、設定できません。最初に自分のマシンにインストールされているフォントの名称を把握して、検討しましょう。

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

~$ 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にしたい場合】
任意の数字を記入します。保存すると、すぐにエディター上に設定が反映されます。

settings.json

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

##【フォントを変更したい場合：デフォルトフォントのUbuntuファミリーを指定】
フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。

settings.json

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

##【フォントを変更したい場合：Source Code Proファミリーを指定】
フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。

settings.json

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

##【フォントを変更したい場合：ウェイト別のフォントを指定】
フォントのウェイトを含めた名前を記入します。保存すると、すぐにエディター上に設定が反映されます。このフォントにすると、英数字が極端に細くなっているのが分かります。

settings.json

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

##【フォントを変更したい場合：日本語表記用に別なフォントを指定】
英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は TakaoExゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。

settings.json

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

##【フォントを変更したい場合：日本語表記用に別なフォントを指定】
英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は Takao Pゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。先ほどのTakaoExゴシックと比べると、日本語表字が異なるのが分かりますね。

settings.json

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

##【おまけ：私のお気に入り】
いろいろと表示させてみたところ、私のお気に入りは Source Code Pro MediumとNoto Sans CJK JP Regularの組み合わせになりました。

settings.json

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

---

##参考にしたサイト：
・特集：Visual Code早分かりガイド
<>

・＠IT：使用可能なフォントを調べるには
<>

・Adobe Soure Code Pro
UIやコーディング環境用に開発されたフォント「Adobe Soure Code Pro」は、GitHubから無償でダウンロードできます。
<>

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