Visual Studio Code offers a completely focused and distraction free view using Zen Mode.

This mode eliminates all the UI abstraction from the code editor, and you can only have the current working file as focused. As a developer this is extremely helpful when working on a single code file.

You can turn On/Off the Zen Mode from the View > Appearance

Focused (Zen) View in Visual Studio Code

You can activate the Zen Mode from View Appearance and by selecting “Zen Mode” or just by using the shortcut key Ctrl+KZ

Zen Mode Selection option
Zen Mode Selection

This can also be enabled using command pallet by executing a command: “View: Toggle Zen Mode

Command Palette
command pallet action

This will remove all the UI element except the current working window in Visual Studio Code.

Full Mode Zen Mode

Customizing the Focused View – Zen Mode

You can also customize the Focused view – Zen Mode by Opening the Settings Dialog from the Setting Option in VS Code or using Ctrl+,

Zen Mode Settings in Visual Studio Code
Zen Mode settings window

Zen Mode settings windows provide several customization option including

  • Layout Option
  • Full-Screen Mode
  • Hide Activity Bar
  • Line Number Hide
  • Hide Status Bar
  • Hide Tabs
  • Restore
  • Silent Notification
Zen Mode Customization
Zen Mode Customization

All these settings are turned on by default. You can turn them off and bring some of the control back in the UI Elements.

Restore” option keeping it enable is always recommended, as if you open any new windows during Zen Mode, it will bring that back by presenting the Zen Mode. Following image shows the quick example of “Hide Status Bar” turned off view.

Zen mode with hide status bar off

To summarize, this is a great feature when you really want to work in a completely distraction free IDE.

If you like this article, share it with your friends and collegues,

Happy Coding!!!

By Sigar Dave

Technical Solutions Professional | Modern Workplace Architect Lead | Microsoft 365 | SharePoint | Power Platform | MS Teams | React

One thought on “Do you know about VSCode Focused View?”

Leave a Reply

Your email address will not be published. Required fields are marked *