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

  • 341
    いいね
  • 1
    コメント

ここ一年ほど、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に対応したエディタを使っている方は、試してみてはいかがでしょうか。