Address
304 North Cardinal St.
Dorchester Center, MA 02124

Work Hours
Monday to Friday: 7AM - 7PM
Weekend: 10AM - 5PM

VSCodeのフォント設定

プログラミングに最適なフォント「0xProto」のインストール方法とVisual Studio Codeでフォントを変更する方法の解説

プログラミングのコードを見やすくするフォント「0xProto」のインストール方法とVSCodeでのフォント変更・設定の方法の解説

プログラミングをしていると細かい英数字ばかりの画面を見続けることになりますので、できるだけ各種プログラミング言語で使われる用語、変数/関数/クラスの名前などが見やすいほうが作業の効率が上がります。

そこで今回はプログラミング向けのフォントとして2023年に発表され、最近話題のフォント「0xProto」をWindowsにインストールして、Visual Studio Code(VSCode)で使えるよう設定する方法を解説します。

0xProtoについて

まずフォント「0xProto」については以下のGithubにある公式リポジトリをご覧ください。

Github:0xProto

見た目は次のようなデザインのフォントです。

ダウンロード

下のページからダウンロードしてください。

Github:0xProtoダウンロードページ

フォント0xProto

ダウンロードするのは一番上にある0xProto~.zipというもので大丈夫です。

ダウンロードできたらそのzipファイルを解凍してください。

Windowsへのインストール方法

フォント0xProto

上画像のように解凍したフォルダの中には(今回の私の場合は)3つのフォントが入っています。そのうち、拡張子が「otf」か「ttf」のどちらか好きなほうを選び、右クリックメニュー(コンテクストメニュー)を表示させてください。

フォント0xProto

その右クリックメニューの中に「インストール」という項目があるので、クリックします。するとインストールが始まります。

フォント0xProtoのインストール

基本的にすぐに完了します。

インストールが終われば解凍したフォルダや、ダウンロードしたzipファイルは削除してもらっても大丈夫です。

では次にVSCodeでの作業に移ります。

VSCodeでの設定方法

コードエディタ上のフォントファミリー設定

VSCode設定

まずVSCodeの設定を開けます。上画像で歯車マークをクリックすると、「Setting/設定」という項目が出てくるのでクリックします。

VSCode設定

そして上画像の入力欄で「font family」と入力します。すると、自動的にその項目の検索が始まり、「Font Family」という項目が登場します。その項目で指定されているのが、すでに使っているフォントです。私の場合は画像の通りメイリオ(Meiryo)となっています。

VSCodeのフォント設定

それをこの画像のとおり、「”0xProto”」と入力して変更します。これで基本的にフォントの変更の設定が完了します。

次で説明する文字合成機能ligatureの設定は各自の好みですので、やらなくてもOKです。

文字合成機能のligatureの設定(お好みで。しなくてもよい)

複数の種類の文字を組み合わせて合成し、なんらかの別の文字を表示させる機能をligature(リガチャー)と言うそうです。私も詳しくはわかりませんが、そういう機能を使いたい場合は、以下の作業を行ってください。

VSCodeのフォント設定

まずは上画像のように、さきほどと同じくSetting(設定)メニューの検索欄で、「font ligature」と入力して、該当項目を表示させます。すると同項目内部に、

Edit in settings.json

という項目が現れますので、それをクリックします。すると、そのjsonファイルがVSCode上で開かれます。次の画像がそれです。

VSCodeのフォント設定

ここで、

"editor.fontLigatures": false

という項目があるので、その「false」を「true」へ変更します。キーボードで入力して書き換えてください。つまり、

"editor.fontLigatures": true

とします。これで作業は終わりです。

VSCodeの再起動

以上の設定が終われば環境によって自動的に0xProtoが適用されているかもしれません。そうでない場合は、一度VSCodeを再起動しましょう。私の場合ですが再起動するとこのような見た目となりました。

VSCodeのフォント設定

向かって左側のエディタ部分のフォントが0xProto、そして右側のターミナル部分のフォントがmonospaceとなっています。文字サイズは同じ12にそろえていますが、けっこう見た目が違いますね。

0xProtoの感想

VSCodeのフォントを新しく0xProtoにしたばかりで、しかも個性的なデザインのフォントですので、これまで使っていたメイリオ(Meiryo)との違いが目立ち、ちょっと違和感を覚えています。ですがすぐに慣れるでしょう。個人的にはアルファベット「f」の文字のデザインがかなり目立つので、関数定義の「def」や分岐処理の「if」などが目立つようになり、「なるほど、コードが読みやすくなってるかな」という感じです。