Luce Carter Logo

  • productivity
  • code
  • a11y

Zoom Zoom for Streamers - How to zoom in on just the code in VS Code

One of the things I love about tech and the internet, is the ability to share knowledge and learn from each other. Such thing just happened to me, while watching WhiteP4nth3r stream on Twitch.

As someone who gives talks, creates videos and streams on Twitch, something really important we need to do each time is make sure the text is visible, whether that is the browser, File Explorer/Finder or our IDE.

One of the most common text editors used by developers is the free, open-source Visual Studio Code from Microsoft. Normally we will hold done ctrl on Windows or cmd on MacOS and then press + to increase the font size. However in VS Code, this increases the font size of everything, including the explorer window and bits beyond just the code. It turns out, we can JUST zoom the code part, yay!

The best part is, this setting is already built into Code, we just need to turn it on!

1. Press ctrl/cmd + , (control for Windows, command for MacOS plus comma) to open Settings

2. In the window that opens, in the Search settings box at the top, type "mousewheel" and press enter

A photo of the search settings entry box in VS Code Settings

3. In the filtered settings results, check the box for "Editor: Mouse Wheel Zoom"

The Editor: Mouse Wheel Zoom setting in VS Code Settings

Tada! Now when you hold ctrl/cmd and scroll your mouse wheel, only the code part will zoom in!

Thanks again go to WhiteP4nth3r for introducing me to this setting!

Emote of Luce making a heart gesture

Luce Carter

Dev 🥑 at MongoDB | Microsoft MVP | Twilio Champion | I help developers build confidence and battle Impostor Syndrome, one line of code or story at a time | She/Her