Minimalistic VSCode: Better Zen Mode in VSCode
Tags: productivity, programming, vscode
Published: 2023-08-05 03:24:32

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