20
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

今更ながら、Source Han Code JPをVSCodeに設定してみたらいい感じだった

Posted at

はじめに

みなさまは、IDEのフォントに何を用いていますか?
デフォルトの方もいれば、いわゆるプログラミング用フォントなどを用いている方もいるのではないでしょうか。

プログラミングフォントといえば、最近0xProtoというフォントが公開されていました

これはこれで、悪くないなぁと思いましたが、今回は私が気に入って使っているSource Han Code JPの紹介をします。

VSCodeへの設定手順(Macの場合)

1. フォントをダウンロード

上記のリンクから、以下のSource code(zip)を選択してダウンロードしてください。

2.zipの展開

3. Font Bookを立ち上げる

Macは、Font Bookというフォントを管理するアプリが標準であります。
LaunchPad > その他 > Font Bookを立ち上げてください。

Screenshot 2023-05-30 15.54.06.png

4. フォントの追加

MacOS 13.0.1(Venture)だと以下の画面になります。

Screenshot 2023-05-30 15.59.01.png

この「マイフォント」タブを設定した上で先ほど回答したフォルダを丸ごとドラッグ&ドロップしてください。
そうすると、「源ノ角ゴシック Code JP」というフォントが追加されます。

これでフォントの追加は完了です。

5. VScodeにフォントの設定をする

  1. VS Codeを立ち上げる
  2. 基本設定 > 設定を選択
  3. 検索窓にフォントと入力
  4. テキストエディター > フォントを選択
  5. Editor: Font Familyの箇所に「"Source Han Code JP"」と入力する
    ※ 複数フォントを指定する場合、左から優先されます。
  6. Editor: Font Ligaturesの箇所にあるsetting.jsonで編集をクリック
  7. jsonの"editor.fontLigatures"trueに設定する
Jsonサンプル
{
  ... 各種設定 ...
  "editor.fontFamily": "\"Source Han Code JP\"",
  "editor.fontLigatures": true,
}

見た目

Screenshot 2023-05-30 16.07.29.png

以上です!
みなさまもおすすめフォントあれば教えてください!

20
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?