VSCode: フォントをリガチャ(合字)対応のものに変更してみる

この記事は約2分で読めます。

リガチャのオフ/オン

こんにちは、さち です。

今回は、無料コードエディター「Visual Studio Code(以下:VSCode)」の編集画面のフォントをリガチャ(合字)に対応しているものに変更してみます。

スポンサーリンク

使用するフォント

今回、使用するフォントは「Fira Code」です。

リガチャ(合字)」機能を持つフォントで、コーディングで使われる特定の文字の組み合わせを分かりやすく表示できます。(機能のオン/オフは選択可能)

リガチャのオフ/オン

JavaScript で >==> を打ち間違えることがあるので、この機能を使えばミスにすぐ気付けそうです。!= !== になるのも意味が分かりやすくて良いですね。

フォント「Fira Code」は、無料で GitHub からダウンロードできます。

フォントのダウンロード

フォントを変更する

  1. アクティビティバーの下部にある「管理(歯車)」アイコンをクリック。
    管理
  2. 設定」をクリック。(ショートカットは Ctrl + キー)
    設定
  3. 検索に font family と入力。
    設定画面
  4. 「Editor: Font Family」の入力欄の先頭に、使用したいフォントの名前コンマを追加します。ただし、フォントの名前に空白が含まれる場合はフォント名を '(シングルクォート) で囲みます。例えば、今回の場合は 'Fira Code', と記述します。
    フォント指定
  5. 編集画面のフォントが「Fira Code」に変更されました。(「L」の小文字に注目すると違いが分かりやすい)
    フォントの変更前/後
フォントが変更されない時は、手順「4」で初期値の Consolas, 'Courier New', monospace を削除して 'Fira Code' だけ記述し、VSCode を再起動してみて下さい
高精細モニタを使っている場合、フォントの名前の記述を Windows では 'Fira Code Retina' に、Mac では FiraCode-Retina にして下さい

リガチャ(合字)を使う

  1. アクティビティバーの下部にある「管理(歯車)」アイコンをクリック。
    管理
  2. 設定」をクリック。(ショートカットは Ctrl + キー)
    設定
  3. 検索に font ligatures と入力。
    設定画面
  4. 「Editor: Font Ligatures」にある「settings.json で編集」をクリック。
    リガチャ設定
  5. editor.fontLigatures」の値を true に変更して、上書き保存(Ctrl + S キー)します。
    settings.json の編集画面
  6. リガチャが「オン」になりました。
    リガチャのオフ/オン

コメント

タイトルとURLをコピーしました