How to Use Zen Mode, Full Screen, and Centered Layout in VS Code

Zen Mode strips away every UI element except the editor so you can focus on your code. Full screen gives the editor your entire display, and centered layout keeps long lines readable on wide monitors.

You can use each feature independently or combine all three.

Zen Mode

Zen Mode hides the Activity Bar, Status Bar, line numbers, and notifications. It switches to full screen and centers the editor. The result is a clean, distraction-free view where nothing competes for your attention.

When you exit, VS Code returns to your previous layout. Files stay open, your cursor position is preserved, and all panels and sidebars reappear.

What stays visible in Zen Mode

By default, Zen Mode only shows the editor and editor tabs. Everything else is hidden. Here is exactly what Zen Mode hides and keeps:

The editor is the only thing that remains. Even the minimap stays hidden if you have it enabled in normal mode.

Customizing Zen Mode

Every Zen Mode behavior is configurable. If you want to keep tabs, show line numbers, or skip full screen, change the settings:

For example, to keep line numbers and tabs but hide everything else:

json

"zenMode.hideLineNumbers": false,
"zenMode.showTabs": "multiple"

To use Zen Mode without full screen, set zenMode.fullScreen to false. The editor stays in its normal window but still hides the UI elements.

Full screen

Full screen makes VS Code fill your entire display, hiding the operating system taskbar and window frame. You can use it with or without Zen Mode.

Toggle full screen with F11 on Windows and Linux, or Cmd+Ctrl+F on macOS. You can also go to View > Appearance > Full Screen.

When Zen Mode enables full screen by default, exiting Zen Mode also exits full screen. If you enable full screen independently, it stays active until you toggle it off.

Centered editor layout

Centered layout narrows the editor area and centers it on screen. On a wide monitor, full-width lines are hard to read. Centered layout gives you a comfortable column width with empty space on both sides.

To enable centered layout without Zen Mode, go to View > Appearance > Centered Layout. This toggles the layout on and off.

You can resize the centered area by dragging the side borders. Hold the Alt key while dragging to move each side independently.

When Zen Mode is active, centered layout is enabled by default. If you disable zenMode.centerLayout, the editor fills the full width instead.

Combining all three

The most focused setup combines all three: Zen Mode hides the UI, full screen maximizes the display, and centered layout keeps the code readable.

Enter Zen Mode with Ctrl+K Z (Cmd+K Z on macOS). You get all three at once. If you prefer to keep one or two, adjust the settings:

• Keep full screen but leave the Status Bar visible: zenMode.hideStatusBar to false
• Center the editor but keep tabs: zenMode.showTabs stays at multiple
• Go full screen but skip centering: zenMode.centerLayout to false

VS Code remembers your Zen Mode settings. When you toggle Zen Mode next time, the same customizations apply.

Next steps

These features help you focus on code you are already working on. To find and open files faster, use Quick Open. To manage your editor layout for multi-file work, learn how to split editors and manage tabs.