連載
» 2021年06月18日 05時00分 公開

フォントからエディタ、改行文字まで、VS Codeを自分好みにカスタマイズVisual Studio Codeで快適Pythonライフ(1/2 ページ)

VS Codeカスタマイズの第一歩として、毎日のように目にするフォントやエディタ、ファイルのエンコーディングや改行文字などを設定する項目を紹介します。

[かわさきしんじ,Deep Insider編集部]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「Visual Studio Codeで快適Pythonライフ」のインデックス

連載目次

[設定]エディタとsettings.jsonファイルによる設定

 Visual Studio Code(以下、VS Code)の[設定]エディタとsettings.jsonファイルについては前回取り上げましたが、ここで簡単にまとめておきましょう。

 [設定]エディタは[Ctrl]+[,]キー(Windows/Linux)または[Command]+[,]キー(macOS)で表示します。

[設定]エディタ [設定]エディタ

 このエディタではチェックボックスやドロップダウンから各設定項目の値を指定できます。あるいは数値を直接入力したり、項目と値の組を入力したりする設定方法もあります。

[設定]エディタでの値の指定方法(一部) [設定]エディタでの値の指定方法(一部)

 しかし、settings.jsonファイルを直接編集する必要がある項目もあります。その場合には、[設定]エディタの右上にある[設定(JSON)を開く]ボタンをクリックすると、以下のようなsettings.jsonファイルを直接編集する必要がある項目もあります。その場合には、[設定]エディタの右上にある[設定(JSON)を開く]ボタンをクリックすると、以下のようにsettings.jsonファイルがエディタに開かれるので、ファイルを直接編集します。

settings.jsonファイルの編集 settings.jsonファイルの編集

 手作業でsettings.jsonファイルを編集したときには、最後にファイルを保存するのを忘れないようにしましょう(保存した時点で、それらの設定が有効になります)。

フォント関連の設定項目

 VS Codeは(テキスト)エディタですから、そのユーザーが主に目にするのはテキストです。ということは、テキストをどんなフォントで表示するかは、毎日の作業に大きな影響を与えます。そういうわけでまずはフォントや空白文字、タブ文字など文字に関連する設定項目から紹介していくことにしましょう。

設定項目 説明 設定可能な値 デフォルト値
editor.fontFamily エディタで使用するフォント カンマ区切りのフォント名 OS依存
editor.fontSize エディタで使用するフォントのサイズ(ピクセル単位) 数値 OS依存
editor.fontWeight フォントの太さ "normal"/"bold"または"1"〜"1000"の数字 "normal"
editor.lineHeight 行の高さ 数値(「0」はフォントサイズを基に計算することを意味する) 0
editor.fontLigatures 合字に関する設定 true/falseまたはCSSのfont-feature-settingsプロパティの値 false(無効)
フォント関連の設定項目

 editor.fontFamily項目はエディタで使用するフォントを指定します。フォントはカンマで区切って複数指定可能です(先に書いたものが優先されます)。フォント名に空白文字が含まれる場合はシングルクオートかダブルクオートで囲む必要がある点には注意してください。以下に例を示します。

「MyricaM M」をフォントに指定 「MyricaM M」をフォントに指定

 これは「プログラミングフォント Myrica / Estable」でフリーで配布されているプログラミング用等幅フォント「MyricaM M」を使うようにeditor.fontfamily項目を設定しているところです。「MyricaM M」というフォント名には半角空白文字が含まれているので、これをシングルクオートで囲んでいることに注目してください(ダブルクオートで囲んでもエスケープ処理してくれます)。

{
    // 省略
    "editor.fontFamily": "'MyricaM M', Consolas, 'Courier New', monospace",
}


対応するsettings.jsonファイルのeditor.fontFamily項目

 editor.fontSize項目はフォントのサイズをピクセル単位で指定します。editor.fontWeight項目はフォントの太さを"normal"か"bold"、もしくは"1"〜"1000"までの数字で指定します。editor.lineHeightは1行の高さを指定する項目です。これもピクセル単位で高さを指定します。デフォルト値は「0」ですが、これはフォントサイズを基に計算して高さが決定されることを意味します。

 最後のeditor.fontLigatures項目はフォントが合字機能などを持つ場合にそれを使用するかを制御するためのものです。デフォルト値はfalseですが、これをtrueにすると、例えばPythonの比較演算子「!=」が「≠」 のように見た目により分かりやすい表記になります。

 以下はeditor.fontFamily項目に無償で使用できるプログラミング用等幅フォント「Fira Code」を指定して、editor.fontLigatures項目をfalseとtrueにして、Pythonの(意味のない)コードを書いてみたところです。

editor.fontLigatures項目の値によるコードの見え方の違い editor.fontLigatures項目の値によるコードの見え方の違い

 ここで紹介したMyrica(MyricaM)とFira Codeはどちらもプログラミング用に作られたフォントなので、よいフォントを探している方にはオススメできます。今見たように、Fira Codeは合字によりコードがキレイに表示できるのですが、筆者は日本語と半角英数字が1つのフォントセットにまとめられ、それらがきっちり2:1の幅になっているMyricaMを最近では常用しています(原稿をVS Codeで執筆していると、どうしても日本語と半角英数字がキッチリと並んだ方が気持ちよいため)。

 フォント関連の設定項目はこの他にもたくさんあります。例えば、関数呼び出しのコードを書こうとしていると、そのパラメーターリストの説明が表示されますが、そこで使用されるフォントはeditor.inlayHints.fontfamily項目やeditor.inlayHints.fontSize項目で指定します。また、パネルに表示されるターミナルのフォントはterminal.integrated.fontFamily項目とterminal.integrated.fontSize項目で指定します。

 これらの項目の多くは今紹介したeditor.fontFamily項目やeditor.fontSize項目の設定をそのまま引き継いだり、その設定を基に大きさだけを変更したりしています。そうした部分についても、VS Codeでは独自に指定が可能ですから、細かなチューンに興味のある方は[設定]エディタの検索ボックスに「font」などと入力して、いろいろな項目に手を入れてみてください。

       1|2 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。