Minimalistic VSCode: Better Zen Mode in VSCode

#productivity #programming #vscode

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

Settings Cycler an extention that allows you to toggle settings with custom keybindings.

Settings

Paste these in your VSCode settings.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

Windows

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

MacOS

[
  {
    "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