JavaScript
font
IntelliJ
TypeScript
VSCode

コーディング用フォント「Fira Code」を使おう

More than 1 year has passed since last update.

ここ一年ほど、Fira Codeというオープンソースのコーディング用フォントを使っていて、Font Liguatureを使った==や'>='の表示が、慣れると等号関係が非常にわかりやすくなり、とても気に入っています。特にJavaScriptやTypeScriptなどで=====の違いや、!==!=の違いを際立たせてくれるので、これらの言語を書く機会がある人は試してみる価値があると思います。

Screenshot 2017-01-09 16.17.04.png

本記事では、そんなFira Codeと、実際にエディタやIDE(個人的にエディタはVSC、IDEはIntelliJを使っています)への設定方法を紹介します。


Fira Codeって?

Fira CodeはFont Ligature(日本語では合字というそうです)を使ったコーディング向けのフォントで、オープンソースで開発・提供されています。以下の公式のレポジトリ画像を見るとわかるのですが、比例関係(<=, =>)や代入(:=)などをわかりやすく表示してくれます。ちなみにFont Ligatureは単にフォントの見た目を変えるだけで、実際には等幅のままです。

all_ligatures.png


フォントをインストールする

Macへのインストールは、オフィシャルじゃないのですが、homebrew経由で行なえます。WindowsやLinuxへのインストール手順はオフィシャルのドキュメントを参照してください。

brew tap caskroom/fonts && brew cask install font-fira-code

インストールされたフォントは、MacのFontbookアプリから確認できます。


Visual Studio Codeで有効にする

User Setting(Code > Preferences > User Settings)を開き、settings.jsonに以下の二行を追加するだけです。

{

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
}

再起動すると、Fira Codeが有効になるはずです。

Screenshot 2017-01-09 12.28.03.png


IntelliJで有効にする

Preference > Editor > Colors & Fonts > Fontで、Primary fontをFira Codeにし、Enable font ligaturesにチェックを入れると有効になります。

Screenshot 2017-01-09 12.31.01.png


最後に

他にもコーディング用だと有名所ではAdobeのSource Code Proなどがありますが、Font Ligatureに対応しているわけではないので、(フォントとしてはとても見やすいのですが)Fira Codeを使っています。ほかにもAtomやMacVimなどでも使えるみたいなので、Font Ligatureに対応したエディタを使っている方は、試してみてはいかがでしょうか。