VSCode（Visual Studio Code）では、コードエディターやターミナル、画面全体など、場所ごとに文字の大きさを変更できます。
文字サイズを変更する方法はいくつかありますが、特に重要なのは「エディターの文字だけを変更する方法」と「VSCode全体を拡大・縮小する方法」の違いです。
コードだけを見やすくしたい場合はeditor.fontSize、サイドバーやメニューなども含めて大きくしたい場合はズーム機能を利用します。
ここでは、VSCodeで文字の大きさを変更する方法について詳しく解説します。
VSCodeのエディターの文字サイズを変更する方法
コードを書くエディター部分の文字サイズは、設定画面から簡単に変更できます。
設定画面から変更する
まず、VSCodeの設定画面を開きます。
Windows・Linuxの場合は、次のショートカットを使用できます。
Ctrl + ,
macOSの場合は、次のショートカットです。
Command + ,
設定画面が表示されたら、上部の検索ボックスに次のように入力します。
Font Size
検索結果から「Editor: Font Size」を探し、任意の数値へ変更します。
たとえば、文字が小さいと感じる場合は、14から16や18などへ変更すると見やすくなります。
設定を変更すると、基本的にはすぐにエディターへ反映されます。
settings.jsonから変更する
VSCodeでは、設定ファイルであるsettings.jsonを直接編集することもできます。
エディターの文字サイズを16に設定する場合は、次のように記述します。
{
"editor.fontSize": 16
}
18に変更したい場合は、次のようにします。
{
"editor.fontSize": 18
}
settings.jsonは、コマンドパレットから開くことができます。
Windows・Linuxでは、
Ctrl + Shift + P
macOSでは、
Command + Shift + P
を押し、次のコマンドを検索します。
Preferences: Open User Settings (JSON)
設定画面から変更する方法とsettings.jsonを編集する方法は、基本的には同じVSCodeの設定を異なる方法で変更しています。
参考サイト
VSCode全体の表示サイズを変更する方法
コードだけでなく、サイドバーやタブ、メニューなども小さく感じる場合は、VSCode全体のズーム機能を利用すると便利です。
Zoom Inで画面全体を拡大する
Windows・Linuxでは、基本的に次のショートカットで拡大できます。
Ctrl + =
macOSでは、
Command + =
です。
Zoom Inを実行すると、エディターだけでなく、サイドバーやメニューなどVSCodeのUI全体が大きく表示されます。
Zoom Outで画面全体を縮小する
画面全体を小さくしたい場合は、Zoom Outを使用します。
Windows・Linuxでは、
Ctrl + -
macOSでは、
Command + -
です。
ズーム操作では、1回の操作につき表示倍率が約20％ずつ変更されます。
ズームを元に戻す
拡大や縮小を繰り返したあと、元の表示倍率へ戻したい場合はReset Zoomを使用します。
Windows・Linuxでは、
Ctrl + Numpad0
macOSでは、
Command + Numpad0
を使用できます。
テンキーがないキーボードを使用している場合は、メニューから、
View → Appearance → Reset Zoom
を選択すると確実です。
window.zoomLevelでVSCode全体の倍率を設定する方法
VSCode全体の基本的なズームレベルは、window.zoomLevelでも設定できます。
window.zoomLevelを設定する
たとえば、次のように設定します。
{
"window.zoomLevel": 1
}
さらに大きくしたい場合は、
{
"window.zoomLevel": 2
}
のように変更できます。
初期値は基本的に0です。
小数を指定することも可能なため、
{
"window.zoomLevel": 0.5
}
のように細かく調整することもできます。
Zoom Inとwindow.zoomLevelの違い
現在のVSCodeでは、window.zoomPerWindowという設定もあります。
この設定はデフォルトで有効になっており、Zoom InやZoom Outで変更したズーム状態をウィンドウごとに保持できます。
そのため、Zoom InやZoom Outを使用した場合に、必ず単純にwindow.zoomLevelの値だけが変更されるわけではありません。
window.zoomLevelは基本となるズームレベルを設定し、一時的な表示調整にはZoom InやZoom Outを利用すると理解すると分かりやすいでしょう。
エディターだけ大きくする場合とVSCode全体を大きくする場合の違い
VSCodeでは、editor.fontSizeとwindow.zoomLevelで変更される範囲が異なります。
editor.fontSizeは、主にコードエディター部分の文字サイズを変更します。
一方、window.zoomLevelやZoom Inでは、エディターだけでなくサイドバーやタブなどを含めたVSCode全体の表示倍率が変更されます。
コードだけが小さくて読みにくい場合はeditor.fontSizeを変更するのがおすすめです。
「ファイル名も小さい」「サイドバーも見づらい」「タブも大きくしたい」という場合は、Zoom Inやwindow.zoomLevelを利用するとよいでしょう。
VSCodeのターミナルの文字サイズを変更する方法
VSCodeに内蔵されているターミナルの文字サイズは、エディターとは別に設定できます。
Terminal Font Sizeを変更する
設定画面を開き、
Terminal Font Size
と検索します。
「Terminal › Integrated: Font Size」という項目から文字サイズを変更できます。
settings.jsonでは、次のように設定します。
{
"terminal.integrated.fontSize": 16
}
エディターとターミナルで異なるサイズを使用することも可能です。
たとえば、
{
"editor.fontSize": 16,
"terminal.integrated.fontSize": 14
}
と設定すれば、コードエディターは16、ターミナルは14で表示されます。
ターミナルの文字だけ一時的に拡大する
VSCodeには、ターミナル専用のフォントサイズ変更コマンドも用意されています。
代表的なコマンドは次のとおりです。
Terminal: Increase Font Size
Terminal: Decrease Font Size
Terminal: Reset Font Size
標準ではショートカットキーが設定されていない場合がありますが、Keyboard Shortcutsから任意のキーを割り当てることができます。
ターミナルを一時的に大きく表示したい場合に便利です。
VSCodeのエディターだけを一時的に拡大する方法
VSCodeでは、UI全体を拡大せず、エディターの文字だけを一時的に拡大・縮小することもできます。
Editor Font Zoomを利用する
コマンドパレットからエディターのフォントズーム機能を利用できます。
代表的な操作には、エディター文字の拡大、縮小、リセットがあります。
この方法は、普段のeditor.fontSizeを変更せず、一時的に文字を大きくしたい場合に便利です。
たとえば、画面共有やプレゼンテーションでコードを見せるときなどに活用できます。
ワークスペースごとに文字サイズを変更する方法
VSCodeでは、すべてのプロジェクトで同じ文字サイズを使用するだけでなく、特定のワークスペースだけ設定を変更することもできます。
User SettingsとWorkspace Settingsを使い分ける
VSCodeの設定には、主にUser SettingsとWorkspace Settingsがあります。
User Settingsは、基本的にすべてのVSCode環境へ適用される設定です。
一方、Workspace Settingsは現在のワークスペースにのみ適用されます。
たとえば、普段は14に設定している場合でも、特定のプロジェクトだけ18に変更できます。
大きな文字でコードを表示したいプロジェクトや、画面共有用のワークスペースなどで便利です。
文字サイズと一緒に行間を変更する方法
文字を大きくすると、コードの行間が狭く感じることがあります。
その場合は、editor.lineHeightも調整すると読みやすくなることがあります。
editor.lineHeightを設定する
たとえば、文字サイズを16、行の高さを24にする場合は次のように設定します。
{
"editor.fontSize": 16,
"editor.lineHeight": 24
}
editor.lineHeightは文字そのものの大きさではなく、行の高さを変更する設定です。
長時間コードを書く場合は、文字サイズだけでなく行間も調整すると視認性を高めやすくなります。
VSCodeで文字サイズを変更しても反映されない場合
設定を変更しても期待した場所の文字が大きくならない場合は、変更している設定項目が目的と合っているか確認しましょう。
editor.fontSizeとズーム機能を混同していないか確認する
editor.fontSizeで変更できるのは、主にコードエディター部分です。
そのため、サイドバーやタブを大きくしたい場合にeditor.fontSizeを変更しても、期待した結果にはなりません。
VSCode全体を大きくしたい場合は、Zoom Inやwindow.zoomLevelを利用します。
ターミナルは別の設定になっている
editor.fontSizeを変更しても、ターミナルの文字サイズは基本的に変わりません。
ターミナルについては、
{
"terminal.integrated.fontSize": 16
}
のように個別に設定する必要があります。
Workspace Settingsを確認する
User Settingsで文字サイズを変更しているのに表示が異なる場合は、Workspace Settingsで別の値が指定されていないか確認しましょう。
VSCodeでは、ワークスペース単位の設定がユーザー設定より優先される場合があります。
特定のプロジェクトだけ文字サイズが違う場合は、Workspace Settingsを確認すると原因を見つけやすくなります。
VSCodeの文字サイズ設定例
文字サイズに絶対的な正解はありません。
ディスプレイサイズや解像度、OSの表示倍率、作業距離などによって見やすいサイズは変わります。
以下はあくまで設定例です。
標準的な設定例
{
"editor.fontSize": 16,
"editor.lineHeight": 24,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0
}
コードの文字を少し大きめにしつつ、VSCode全体の倍率は標準のままにした例です。
文字を大きめに表示する設定例
{
"editor.fontSize": 17,
"editor.lineHeight": 26,
"terminal.integrated.fontSize": 15,
"window.zoomLevel": 0.5
}
ノートPCなどで文字が小さく感じる場合は、このようにエディターとターミナルのフォントサイズを少し大きくし、VSCode全体も拡大すると見やすくなることがあります。
VSCodeの文字の大きさを変更する方法のまとめ
VSCodeでは、変更したい場所によって文字サイズの設定方法が異なります。
コードエディターの文字だけを変更する場合は、
{
"editor.fontSize": 16
}
を使用します。
ターミナルの文字サイズを変更する場合は、
{
"terminal.integrated.fontSize": 16
}
を使用します。
サイドバーやメニューなども含めてVSCode全体を大きくしたい場合は、Zoom Inや、
{
"window.zoomLevel": 1
}
を利用できます。
一時的にVSCode全体を拡大したいのであれば、Windows・LinuxではCtrl + =、macOSではCommand + =を使う方法が手軽です。
コードだけが小さい場合はeditor.fontSize、VSCode全体が小さく感じる場合はズーム機能というように、目的に合わせて設定を使い分けるとよいでしょう。
以上、VSCodeで文字の大きさを変更する方法についてでした。
最後までお読みいただき、ありがとうございました。
