VSCodeに筆記体を導入

概要

前置き

エディタ上の芸のないブロック体の文字を眺めていると、なんだか気が滅入ってきます。

そこで、Mediumやdev.toなど海外メディアのプログラミング記事でよく見かける、いい感じにおしゃれな筆記体フォントをVisual Studio Codeに導入し、プログラミングを少しでも耐え得るものにします。

結果

以下の画像のように、VSCodeでコードの要所要所を筆記体に変えました。

手順

フォントのインストール

Fira Code iScriptをインストールします。

Fira Code iScriptは、プログラミング用に最適化されたフォント「Fira Code」に、筆記体を加えたものです。以下がFira Codeの例です。

Windowsであれば、ダウンロードしたttfファイルをダブルクリックすることでインストールできます。

VSCodeのエクステンションのインストール

筆記体をサポートするものなら何でもいいのですが、私はDark ++ Italicを使いました。

フォント設定の変更

VS Codeの「ファイル」=>「基本設定」=>「設定」=>「テキスト エディター」=>「フォント」から、Font FamilyをFira Code iScriptに変更します。

CSSの変更

上までの手順を踏むと、JavascriptやPythonなどでは、いい感じに筆記体が表示されるようになります。

それでも、Go言語などでは、筆記体の箇所が少ないように思えます。そこで、cssをいじって、特定のクラスを持つ箇所は筆記体にします。以下がその例です。

注意！VS Codeのテーマを変更すると、クラス名の割り振りも変更になってしまいます。下の例はDark ++ Italic以外のテーマでは、いい感じに表示されないかもしれません。

.mtki{
        font-size: 1.125em;
        font-stretch: ultra-condensed;
}
.mtk4, .mtk6{
        font-size: 1.125em;
        font-stretch: ultra-condensed;
        font-style: italic;
}

別のテーマを使っている場合などは、VS Codeの「ヘルプ」=>「開発者ツールの切り替え」をして、筆記体にしたい部分のクラス名を調べてください。

余談

単純にフォントの設定を筆記体にするだけだと、以下の画像のようにとても読めたものではなくなります。上記の通り、エクステンションを導入したりやCSSをいじったりする必要があります。