【VSCode】テーマやフォントの設定

VSCodeのテーマやフォントの設定方法を解説します。

テーマの設定方法
フォントの設定方法（種類とサイズ）
おすすめ日本語対応フォント
関連ページ

テーマの設定方法

① 上部メニューから「ファイル」→「ユーザー設定」→「テーマ」→「配色テーマ」を選択します。

② 一覧から好きなテーマをクリックすると、即座に反映されます。

【コマンドパレットを使う場合】
ショートカット`Ctrl + Shift + P`でコマンドパレットを開き、「Color Theme」と入力し、「Preferences: Color Theme」を選択することでも同様にテーマの選択を行うことができます。
※Macは「`Cmd + Shift + P`」

【一覧にないテーマを追加したい場合】
拡張機能（Extensions）から「theme」で検索し、インストールして追加することもできます。ただし、インストール前には「マルウェアが混入していないか」など、評判を見て慎重に判断することをおすすめします。
例：One Dark Pro、Dracula Official、Tokyo Nightなど。

解説動画

フォントの設定方法（種類とサイズ）

① 上部メニューから「ファイル」→「ユーザー設定」→「設定」を選択し、設定画面を開きます。
※ショートカットCtrl +（Macは「Cmd +」）でも開くことができます・

② 検索バーに「font」と入力し、以下の項目を設定します。

項目	概要
`Editor: Font Size`	フォントサイズ（例：14）
`Editor: Font Family`	使用するフォント名（例：`'Fira Code', 'ＭＳ明朝', monospace`）デフォルトで設定されているフォントの種類は「Consolas, ‘Courier New’, monospace」になっています。複数のフォントを指定する場合はカンマ(,)で区切って入力します。（前に指定したフォントが優先されます）。フォント名に空白が含まれる場合はシングルクオーテーション（’）で囲って記述します。
`Editor: Font Ligatures`	合字（ligature、リガチャ）を使うかどうか（例：`true`）。合字とは、2文字以上の文字を、1文字として表記する文字のことです。

【補足】
「settings.json」は、エディタの動作やデザインを細かくカスタマイズできる設定ファイルです。このファイルを弄ってフォントを設定することもできます。設定画面右上の「{}」アイコンをクリックして開くことができます。また、コマンドパレット（Ctrl+Shift+P）を開いて「Preferences: Open Settings (JSON)」と入力して選択することでも開くことができます。プロジェクトごとに上書きしたい設定があれば、「s.vscode/settings.json」に記述します。

【記述例】settings.json

   "editor.fontFamily": "'Fira Code', 'Source Han Code JP', monospace",
   "editor.fontSize": 14,
   "editor.fontLigatures": true

フォント名	特徴
Source Han Code JP	Adobe製。日本語と英語のバランスが良い
PlemolJP	IBM Plexベース。視認性が高く等幅
HackGen	Hack + 源ノ角ゴシック。開発向けに最適
Moralerspace	Monaspace + 日本語フォントの合成版

テーマの設定方法

解説動画

フォントの設定方法（種類とサイズ）

おすすめ日本語対応フォント

関連ページ

コメント