This zen mode setup provides a seamless and focused coding experience by elegantly concealing default UI elements. The typical UI elements, such as sidebars, menus, and toolbars, gracefully fade away, allowing code to take center stage.

<h2>
 <a name="my-zen-workflow" href="#my-zen-workflow">
 </a>
 My Zen Workflow
</h2>

<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler">Settings Cycler</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#keybindings">Keybindings</a></li>
</ul>

<h3>
 <a name="settings-cycler" href="#settings-cycler">
 </a>
 Settings Cycler
</h3>

<a href="https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler">Settings Cycler</a> an extention that allows you to toggle settings with custom keybindings.

<h3>
 <a name="settings" href="#settings">
 </a>
 Settings
</h3>

Paste these in your VSCode <a href="https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations">settings.json</a> 


<div class="highlight js-code-highlight">
<pre class="highlight json"><code>{
 "settings.cycle": [
 {
 "id": "zenOn",
 "overrideWorkspaceSettings": true,
 "values": [
 {
 "workbench.activityBar.visible": false,
 "workbench.statusBar.visible": false,
 "workbench.editor.showTabs": false,
 "window.menuBarVisibility": "hidden",
 "workbench.layoutControl.enabled": false,
 "breadcrumbs.enabled": false,
 "workbench.tips.enabled": false,
 "editor.overviewRulerBorder": false,
 "window.commandCenter": false,
 "workbench.sideBar.location": "right",
 "window.title": "${folderName}${separator}${profileName}",
 "workbench.startupEditor": "none",
 "editor.minimap.enabled": false,
 "workbench.editor.decorations.colors": false,
 "workbench.editor.decorations.badges": false
 }
 ]
 },
 {
 "id": "zenOff",
 "overrideWorkspaceSettings": true,
 "values": [
 {
 "workbench.activityBar.visible": true,
 "workbench.statusBar.visible": true,
 "workbench.editor.showTabs": true,
 "window.menuBarVisibility": "classic",
 "workbench.layoutControl.enabled": true,
 "breadcrumbs.enabled": true,
 "workbench.tips.enabled": false,
 "editor.overviewRulerBorder": true,
 "window.commandCenter": true,
 "workbench.sideBar.location": "right",
 "window.title": "${folderName}${separator}${profileName}",
 "workbench.startupEditor": "none",
 "editor.minimap.enabled": false,
 "workbench.editor.decorations.colors": false,
 "workbench.editor.decorations.badges": false
 }
 ]
 }
 ]
}
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h3>
 <a name="keybindings" href="#keybindings">
 </a>
 Keybindings
</h3>

Paste these in your <a href="https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization">keybindings.json</a>

<h4>
 <a name="windows" href="#windows">
 </a>
 Windows
</h4>



<div class="highlight js-code-highlight">
<pre class="highlight json"><code>[
 {
 "key": "ctrl+k z",
 "command": "settings.cycle.zenOn"
 },
 {
 "key": "ctrl+k y",
 "command": "settings.cycle.zenOff"
 }
]
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h4>
 <a name="macos" href="#macos">
 </a>
 MacOS
</h4>



<div class="highlight js-code-highlight">
<pre class="highlight json"><code>[
 {
 "key": "cmd+k z",
 "command": "settings.cycle.zenOn"
 },
 {
 "key": "cmd+k y",
 "command": "settings.cycle.zenOff"
 }
]
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<h2>
 <a name="advantages-of-this-setup" href="#advantages-of-this-setup">
 </a>
 Advantages of this Setup
</h2>

<ul>
<li>Two seperate keybindings to turn zen mode on and off allows you to toggle any UI element and still easily revert back to zen mode</li>
<li>This setup is persistent globally and you don't need to toggle zen mode for every new project</li>
</ul>

This zen mode setup provides a seamless and focused coding experience by elegantly concealing default UI elements. The typical UI elements, such as sidebars, menus, and toolbars, gracefully fade away, allowing code to take center stage.

## My Zen Workflow

- [Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler)
- [Settings](#settings)
- [Keybindings](#keybindings)

### Settings Cycler

[Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler) an extention that allows you to toggle settings with custom keybindings.

### Settings

Paste these in your VSCode [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations)

```json
{
  "settings.cycle": [
    {
      "id": "zenOn",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": false,
          "workbench.statusBar.visible": false,
          "workbench.editor.showTabs": false,
          "window.menuBarVisibility": "hidden",
          "workbench.layoutControl.enabled": false,
          "breadcrumbs.enabled": false,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": false,
          "window.commandCenter": false,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    },
    {
      "id": "zenOff",
      "overrideWorkspaceSettings": true,
      "values": [
        {
          "workbench.activityBar.visible": true,
          "workbench.statusBar.visible": true,
          "workbench.editor.showTabs": true,
          "window.menuBarVisibility": "classic",
          "workbench.layoutControl.enabled": true,
          "breadcrumbs.enabled": true,
          "workbench.tips.enabled": false,
          "editor.overviewRulerBorder": true,
          "window.commandCenter": true,
          "workbench.sideBar.location": "right",
          "window.title": "${folderName}${separator}${profileName}",
          "workbench.startupEditor": "none",
          "editor.minimap.enabled": false,
          "workbench.editor.decorations.colors": false,
          "workbench.editor.decorations.badges": false
        }
      ]
    }
  ]
}
```

### Keybindings

Paste these in your [keybindings.json](https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization)

#### Windows
```json
[
  {
    "key": "ctrl+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "ctrl+k y",
    "command": "settings.cycle.zenOff"
  }
]
```

#### MacOS
```json
[
  {
    "key": "cmd+k z",
    "command": "settings.cycle.zenOn"
  },
  {
    "key": "cmd+k y",
    "command": "settings.cycle.zenOff"
  }
]
```

## Advantages of this Setup

- Two seperate keybindings to turn zen mode on and off allows you to toggle any UI element and still easily revert back to zen mode
- This setup is persistent globally and you don't need to toggle zen mode for every new project

This zen mode setup provides a seamless and focused coding experience by elegantly concealing default...