Did you know - Visual Studio Code provides a completely focused view?

Visual Studio Code offers a completely focused and distraction-free view using Zen Mode. Zen 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 helps excellent when we are focused and working on a single code file. You can turn on or off the Zen Mode from the View > Appearance. This post lets us learn how to enable the focused view in Visual Studio code and customize the picture as per our need.

Completely focused view in Visual Studio Code

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

Secondly, this can also be enabled from the command palette by executing “View: Toggle Zen Mode” command

With that, Visual Studio Code will remove all the UI element except the current working window.

Here is the quick difference in the full mode vs Zen Mode

Customize the Focused View – Zen Mode

Finally, Visual Studio Code allows us to customize the Zen Mode from the Settings. Open the Settings Dialog from the Setting Option in VS Code or using Ctrl+,

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

By default, all these settings are turned on. 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 of view.