How to Zoom In and Out in VS Code (Plus an Optional Extension)

I love the Zoom Bar extension for VS Code, but you don’t need it be able to zoom in and zoom out.

Since I’ve been streaming about programming, I’ve been using a 10px font size in my VS Code settings and then zooming in as I code.

In VS Code, zooming in also increases the interface size, while the font size setting does not, so I like to make my interface more readable.

The Zoom Bar extension tells me my zoom in the status bar at the bottom of my VS Code window, and I can click to change the zoom level.

But you don’t need Zoom Bar to become a zoom master; just use these keyboard shortcuts for VS Code:

• View: Reset Zoom Ctrl + NumPad0
• View: Zoom In Ctrl + =
• View: Zoom Out Ctrl + -

You may realize that these are the same Zoom In and Zoom Out shortcuts as for Mozilla Firefox and Google Chrome, except in the browsers the reset zoom is Ctrl + 0, not Ctrl + NumPad0:

• Browser: Reset Zoom Ctrl + 0
• Browser: Zoom In Ctrl + =
• Browser: Zoom Out Ctrl + -

On macOS, the VS Code shortcuts use the Command key, ⌘:

• View: Reset Zoom ⌘ + NumPad0
• View: Zoom In ⌘ + =
• View: Zoom Out ⌘ + ⇧Shift + -

The VS Code shortcut for Reset Zoom is different from the one the browsers use because Ctrl + 0 in VS Code focuses on the sidebar:

• View: Focus into Side Bar Ctrl/⌘ + 0

Focusing on the sidebar is a pretty cool feature in and of itself, as discussed by Benjamin Pasero and Travis Sullivan:

bpasero: “This keybinding is currently used to focus the sidebar so that you have a nice logical keybinding model of Ctrl+0 being sidebar and Ctrl+1/2/3 to focus an editor group.”

pcgeek86: “@bpasero I recently figured this out. It is convenient to have CTRL + 0 map to the sidebar.”

With Focus into Side Bar (Ctrl/⌘ + 0), you can navigate VS Code’s left-hand sidebar panel using the keyboard.

By moving focus to the sidebar, you can quickly browse files in the Explorer, search and replace in the Search panel, etc.

It’s not clear why Zoom Out is different on Mac as well, but the command is ⌘ + ⇧Shift + - in the macOS quick reference.

No NumPad? No Problem!

If you don’t have a number pad on your keyboard (no NumPad0), you’d want to remap the keybinding, maybe to Ctrl/⌘ + ⇧Shift + 0, which is unused in the default shortcuts at the time I wrote this.

You can also zoom by pulling up the Command Palette with Ctrl/⌘ + ⇧Shift + P. Search for “zoom” to see these settings:

The zoom settings are tucked away inside the View > Appearance menu, which has a lot of good keyboard shortcuts in it:

One caveat here is the interaction between interface zoom and CodeSnap, which is my favorite code screenshot extension.

When you go to take screenshots with CodeSnap, you’ll want to flip your settings so that you’re using a higher-resolution font.

Otherwise you’ll get “jaggies” from the lack of anti-aliasing in the screenshot of your zoomed-in 10px font.

I’ve started using 60px in my font settings, then zooming out to get the code-wrapping how I want it in CodeSnap.

So, if you’re streaming like me or just on a big monitor (also me), then give your eyes a break by zooming in.

Happy coding! 🔎💻👀👓💯

Further Reading

• The VS Code Docs explain using zoom, keyboard shortcuts, high-contrast mode and more in their accessibility guide:

• You can view all of the VS Code keyboard shortcuts by navigating through to File > Preferences > Keyboard Shortcuts on Windows and Linux or, on macOS, Code > Preferences > Keyboard Shortcuts:

• The VS Code Docs also have PDF keyboard shortcut references available for each OS and useful docs about the interface:

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.