GitHubNext の新しいフォント Monaspace を VSCode で使う

https://monaspace.githubnext.com/
(全然関係ないけどこのサイトめちゃくちゃオシャレ)

もともと CSS のプロパティで monospace があるが、これは monospace ではなく Monaspace である。

おしゃれな感じのフォントと、いい感じの合字がある。

合字の一覧。公式レポより

GitHub レポはこれ

https://github.com/githubnext/monaspace

フォントのインストール自体はとても単純で、普通のフォントと同じようにインストールする。

Mac だと brew から入るが Windows は特になにも用意されてないので普通にダウンロードしてインストールする。

VSCode で使うには、settings.json を編集する必要がある。(Ctrl+Shift+P→open user settings (JSON))

{
...
  "editor.fontFamily": "Monaspace Neon Var, Consolas, Courier New, monospace",
  "editor.fontLigatures": "'calt', 'liga', 'dlig'"
}

editor.fontFamiliy の先頭に Monaspace Neon Var (Monaspace の Neon スタイルの Variable フォント) を指定する。後ろは自由。

editor.fontLigatures では、リガチャ (合字)を設定する。ここでの指定はどうやら CSS の font-variant-ligatures の値を指定するようだ。

とりあえず 'calt', 'liga', 'dlig' を指定すれば良さそう。注意点として ' で囲まないとだめっぽい。

ここまで設定するととりあえず以下のようになる:

ただし、これだけでは公式サイトにあるような、Copilot の補完だけ Krypton フォントにする、みたいなことが実現できていない。

以下を参考にカスタム CSS を適用すると一応補完とかのフォントが変わるようになる... けど面倒なので VSCode 公式で何か対応してくれないかな...

https://kieranklukas.com/blog/monaspace-vs-code-install/

合字の設定で 'dlig' を無効化しないと、勝手にポイント とか リットルとかが合字でちっさくなってしまう。

  "editor.fontLigatures": "'calt', 'liga', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08'",

使ってたらなんか見づらかったので最終的に合字使うのをやめた。