How to Zoom in and out in Visual Studio Code

# Table of Contents

1. Zoom in and out in VS Code using keyboard shortcuts
2. Zoom in and out in VS Code using the Command Palette
3. Changing the keyboard shortcuts for zooming in and out
4. Enable Mouse Wheel zoom in Visual Studio Code
5. Enabling Mouse Wheel Zoom in settings.json
6. Zooming in and out using the top menu in VS Code

# Zoom in and out in VS Code using keyboard shortcuts

Use the following keyboard shortcuts to zoom in and out in VS Code:

• Ctrl + = ( or Cmd + = on macOS) to zoom in.
• Ctrl + - ( or Cmd + - on macOS) to zoom out.
• Ctrl + Numpad0 (or Cmd + Numpad0 on macOS) to reset the zoom level to 0.

You can also view the keyboard shortcuts for your operating system in this table in the docs.

The commands are called:

• Zoom in
• Zoom out
• Reset Zoom

# Zoom in and out in VS Code using the Command Palette

You can also use the Command Palette.

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type Zoom and select one of:

• Editor Font Zoom In
• Editor Font Zoom Out
• Editor Font Zoom Reset

Using the Editor Font Zoom Reset command via the Command Palette is quite convenient if your keyboard doesn't have a Numpad.

# Changing the keyboard shortcuts for zooming in and out

If you need to change the keyboard shortcuts for zooming in and out:

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type Keyboard Shortcuts and select Preferences: Open Keyboard Shortcuts.

3. Search for zoom.

4. Double-click on the corresponding row, specify a keyboard shortcut and hit Enter to confirm.

You can also single-clock on a row and then click on the pencil icon.

For example, if your keyboard shortcut doesn't have a Numpad, you can set the View: Reset Zoom command to Ctrl + 0 (or Cmd + 0 on macOS).

Here is a short clip of using the new keyboard shortcut.

# Enable Mouse Wheel zoom in Visual Studio Code

When you use the keyboard shortcuts, you increase/decrease the editor and the font.

If you only want to increase/decrease the font when zooming in and out, you have to enable the Mouse Wheel Zoom setting.

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings and select Preferences: Open User Settings.

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

3. Type zoom and enable the Editor: Mouse Wheel Zoom setting.

The Mouse Wheel Zoom setting allows us to zoom the font of the editor using the mouse wheel and holding Ctrl (or Cmd on macOS).

Hold Ctrl and use the mouse wheel to zoom in and out.

Notice that using mouse wheel zoom affects only the font of the editor.

# Enabling Mouse Wheel Zoom in settings.json

You can also enable mouse wheel zoom directly in your settings.json file.

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings json.

3. Click on Preferences: Open User Settings (JSON)

4. Paste the following line into your settings.json file.

Copied!
"editor.mouseWheelZoom": true,

# Zooming in and out using the top menu in VS Code

You can also use the top menu to zoom in and out.

1. Click on View in the top menu, then hover over Appearance and select one of Zoom in, Zoom Out and Reset Zoom.

2. Note: you might have to press Alt to show the top menu on Windows and Linux.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Reset your Keyboard Shortcuts in Visual Studio Code
• How to Reset Visual Studio Code to the Default Settings
• Using VS Code as default Git editor, difftool and mergetool
• Change the Cursor color, style and animation in VS Code
• How to Change the default Terminal in Visual Studio Code
• How to Hide or Show the Minimap in Visual Studio Code