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.
Related Tip: How to Compare files in Visual Studio Code ?
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
- 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.
To summarize, this is a great feature when you really want to work in a completely distraction free IDE.