In VSCode, you can quickly remove unnecessary UI elements (distractions) by entering Zen Mode.
How to enter Zen Mode in VSCode:
- Press Cmd + Shift + P (Mac), or Ctrl + Shift + P (Windows) and search for “zen”.
- In the search dropdown, use your mouse or arrow keys to select the one that says “View: Toggle Zen Mode”.
- While in Zen Mode, you can press Cmd + Shift + P again and click on Zen Mode again to disable it.
Quick video demonstration:
That’s it. Now you got a distraction-free working environment in VSCode!
But wait, there is more!👇
Zen Mode toggle shortcut
VSCode has a built-in shortcut for toggling Zen Mode on and off. The specific shortcut depends on your Operating System and keyboard language.
You can see the Zen Mode shortcut in the search dropdown (Cmd + Shift + P):
As you can see in the screenshot above, my Zen Mode toggle shortcut is Cmd + K, Z, but yours might be different.
In case you’re confused, the way you run that command is by first pressing Cmd + K, then let go of both Cmd & K, and press Z (within a couple of seconds).
Quick bonus tip
If you’re working on a big screen, you might also want to toggle the centered layout option in VSCode:
- Press Cmd + Shift + P (Mac), or Ctrl + Shift + P (Windows) and search for “centered”.
- Choose View: Toggle Centered Layout
Note: Centered Layout mode doesn’t have a built-in shortcut.
