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

この記事は約3分で読めます。
記事内に広告が含まれています

リガチャのオフ/オン

こんにちは、さち です。

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

スポンサーリンク

「リガチャ」とは?

リガチャ(合字)」とは、文字を合体する(文字の見た目を変える)機能です。

例えば、コーディングで使われる特定の文字の組み合わせを分かりやすく表示できます。(機能のオン/オフは選択可能)

リガチャのオフ/オン

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

VSCode でリガチャを使う

フォントのダウンロード

まずは、リガチャに対応しているフォントが必要です。

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

フォントのダウンロード

ダウンロードした ZIPファイル を解凍して、フォント「Fira Code」をインストールしましょう。

表示フォントを変える

  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. リガチャが「オン」になりました。
    リガチャのオフ/オン

関連記事

VSCode: リガチャフォント「FiraCode」の文字の形を変えてみる

コメント

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