VSCodeでは、マウスホイールを使ってエディター内の文字を拡大・縮小できます。
WindowsやLinuxでは「Ctrlキー」、macOSでは「Commandキー」を押しながらマウスホイールを操作するのが基本です。
ただし、マウスホイールによるズーム機能は設定によって無効になっている場合があります。
その場合は、「Editor: Mouse Wheel Zoom」を有効にする必要があります。
また、VSCodeには「エディター内の文字サイズを変更する方法」と「VSCode全体を拡大・縮小する方法」があります。
それぞれ動作が異なるため、目的に応じて使い分けることが重要です。
VSCodeでマウスホイールによる拡大縮小を有効にする方法
設定画面を開く
まず、VSCodeの設定画面を開きます。
Windows・Linuxでは、次のショートカットを使用できます。
Ctrl + ,
macOSでは、次のショートカットです。
Command + ,
メニューから開く場合は、「File」や「Code」メニューから「Settings」を開く方法もあります。
VSCodeのバージョンやOSによってメニューの表示名称が多少異なる場合がありますが、「Settings」を開けば問題ありません。
「Mouse Wheel Zoom」を検索する
設定画面を開いたら、上部にある検索ボックスへ次のように入力します。
mouse wheel zoom
検索結果の中に、
Editor: Mouse Wheel Zoom
という項目が表示されます。
チェックボックスをオンにすると、エディター内でマウスホイールによる文字サイズ変更が利用できるようになります。
VSCodeでマウスを使って文字を拡大する方法
Windows・Linuxの場合
WindowsやLinuxでは、次の操作でエディター内の文字を拡大できます。
Ctrl + マウスホイール上
Ctrlキーを押した状態でホイールを上方向へ回すと、エディター内のフォントサイズが大きくなります。
コードの細かい部分を確認したいときや、画面共有・プレゼンテーションなどで文字を見やすくしたいときに便利です。
macOSの場合
macOSでは、次の操作を使用します。
Command + マウスホイール
Commandキーを押しながらマウスホイールを操作すると、エディターの文字サイズを変更できます。
WindowsやLinuxとは使用する修飾キーが異なるため注意してください。
VSCodeでマウスを使って文字を縮小する方法
WindowsやLinuxでは、
Ctrl + マウスホイール下
と操作すると、エディター内の文字サイズを小さくできます。
macOSでは、Commandキーを押しながらホイールを縮小方向へ操作します。
文字サイズを小さくすると、1画面に表示できるコード量を増やせます。
長いファイルの全体構造を確認したい場合などに便利です。
settings.jsonでマウスホイールズームを有効にする方法
editor.mouseWheelZoomを設定する
設定画面を使わず、settings.jsonから直接有効にすることもできます。
次の設定を追加します。
{
"editor.mouseWheelZoom": true
}
すでにほかの設定が記述されている場合は、その中に追加してください。
たとえば、次のように設定できます。
{
"editor.fontSize": 14,
"editor.mouseWheelZoom": true
}
trueにするとマウスホイールによるズームが有効になり、falseにすると無効になります。
参考サイト
[VSCode] エディターの表示のみ倍率変更（拡大/縮小）できるようにする設定 "editor.mouseWheelZoom": true – てくなべ
マウスホイールズームとVSCode全体のズームの違い
editor.mouseWheelZoomはエディターの文字サイズを変更する
editor.mouseWheelZoomで変更されるのは、主にコードを入力するエディター部分のフォントサイズです。
そのため、マウスホイールを使って拡大しても、サイドバーやアクティビティバーなどが同じように大きくなるわけではありません。
「コードの文字だけを大きくしたい」という場合に適しています。
VSCode全体のズームではUI全体が拡大される
VSCodeには、アプリケーション全体を拡大・縮小する機能もあります。
こちらを使用すると、エディターだけではなく、サイドバーやタブなどを含めたVSCode全体の表示サイズが変化します。
WindowsやLinuxでは、一般的に次のショートカットを利用できます。
Ctrl + =
Ctrl + -
Ctrl + =が拡大、Ctrl + -が縮小です。
macOSでは、
Command + =
Command + -
を使用します。
エディターの文字だけではなく、VSCode全体を大きくしたい場合はこちらを利用するとよいでしょう。
VSCode全体の表示倍率をwindow.zoomLevelで変更する方法
window.zoomLevelとは
VSCode全体のズーム倍率は、window.zoomLevelでも設定できます。
たとえば、次のように指定します。
{
"window.zoomLevel": 1
}
標準状態は基本的に0です。
数値を大きくするとUI全体が大きくなり、低くすると小さくなります。
小数を指定して細かく調整することも可能
window.zoomLevelには整数だけではなく、小数を指定することもできます。
たとえば、
{
"window.zoomLevel": 0.5
}
のように設定できます。
ショートカットによるズームでは大きすぎる、あるいは小さすぎると感じる場合は、window.zoomLevelを使って細かく調整すると便利です。
VSCodeのエディター文字サイズを固定する方法
editor.fontSizeを変更する
マウスホイールを使用せず、最初から特定の文字サイズに設定したい場合は、editor.fontSizeを利用します。
たとえば、文字サイズを16にしたい場合は次のように設定します。
{
"editor.fontSize": 16
}
マウスホイールズームと併用する場合は、次のように設定できます。
{
"editor.fontSize": 16,
"editor.mouseWheelZoom": true
}
普段は16のフォントサイズを使用し、必要なときだけマウスホイールで大きさを調整するといった使い方ができます。
VSCodeのターミナルもマウスで拡大縮小できる
terminal.integrated.mouseWheelZoomを有効にする
VSCodeでは、統合ターミナルにもマウスホイールズーム用の設定があります。
settings.jsonへ次のように追加します。
{
"terminal.integrated.mouseWheelZoom": true
}
この設定を有効にすると、統合ターミナル内でも修飾キーとマウスホイールを組み合わせてフォントサイズを変更できます。
エディターとターミナルの設定は別になっている
注意したいのは、エディターと統合ターミナルでは設定項目が異なることです。
エディターの場合は、
"editor.mouseWheelZoom": true
統合ターミナルの場合は、
"terminal.integrated.mouseWheelZoom": true
を使用します。
エディター側を有効にしただけでは、必ずしもターミナル側のマウスホイールズームまで有効になるわけではありません。
両方で使用したい場合は、それぞれ設定しておくとよいでしょう。
VSCodeでマウスホイールによる拡大縮小ができない原因
Editor: Mouse Wheel Zoomが無効になっている
最初に確認したいのが、editor.mouseWheelZoomの設定です。
次のようになっているか確認してください。
{
"editor.mouseWheelZoom": true
}
falseになっている場合は、マウスホイールによるエディターのズームは利用できません。
修飾キーを押していない
通常のマウスホイール操作は、画面のスクロールとして使用されます。
そのため、ホイールだけを回しても文字サイズは変更されません。
Windows・LinuxではCtrlキー、macOSではCommandキーを押しながら操作する必要があります。
エディター以外の場所で操作している
editor.mouseWheelZoomはエディターを対象とする設定です。
そのため、エクスプローラーやサイドバーなどにマウスポインターを置いて操作しても、期待した結果にならない場合があります。
コードが表示されているエディター部分へマウスポインターを移動してから操作してください。
VSCode全体を拡大したい場合は別の機能を使う
editor.mouseWheelZoomを有効にしても、VSCode全体のUIが拡大されるわけではありません。
メニュー、サイドバー、タブなどを含めて大きくしたい場合は、VSCodeのZoom In・Zoom Out機能やwindow.zoomLevelを利用します。
目的に応じて使い分けることが大切です。
VSCodeでおすすめの拡大縮小設定
エディターとターミナルの両方を使いやすくする
マウスを使ってエディターとターミナルの両方を調整したい場合は、たとえば次のように設定できます。
{
"editor.fontSize": 14,
"editor.mouseWheelZoom": true,
"terminal.integrated.fontSize": 14,
"terminal.integrated.mouseWheelZoom": true,
"window.zoomLevel": 0
}
普段の文字サイズはeditor.fontSizeやterminal.integrated.fontSizeで決めておき、必要なときだけマウスホイールで調整する方法です。
VSCode全体の表示倍率はwindow.zoomLevelで管理できます。
VSCodeでマウスを使って拡大縮小する方法のまとめ
VSCodeでマウスを使ってエディターの文字を拡大・縮小したい場合は、「Editor: Mouse Wheel Zoom」を有効にします。
settings.jsonでは、次の設定です。
{
"editor.mouseWheelZoom": true
}
設定後は、Windows・LinuxではCtrl + マウスホイール、macOSではCommand + マウスホイールを使ってエディターの文字サイズを変更できます。
一方、メニューやサイドバーを含むVSCode全体の表示サイズを変更したい場合は、Zoom In・Zoom Outやwindow.zoomLevelを使用します。
また、統合ターミナルでマウスホイールズームを使用したい場合は、terminal.integrated.mouseWheelZoomを別途設定する必要があります。
「エディターの文字だけを変更したいのか」「VSCode全体を拡大したいのか」を区別して設定すると、自分の作業環境に合った表示サイズへスムーズに調整できます。
以上、VSCodeでマウスを使って拡大縮小する方法についてでした。
最後までお読みいただき、ありがとうございました。
