Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Custom Bottom Status BarNew to Visual Studio Code? Get it now.
Custom Bottom Status Bar

Custom Bottom Status Bar

Chlour

|
17 installs
| (0) | Free
Add configurable command, task, and terminal buttons to the VS Code status bar.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Custom Status Bar

Add configurable buttons to the VS Code status bar for quick access to commands, terminals, and workspace tasks.

Idea from customize-toolbar

✨ Features

  • Add buttons to the status bar (bottom right)
  • Launch VS Code commands, terminal commands, or workspace tasks
  • Support for dropdown-style grouped actions
  • Auto-detects tasks.json and shows task list button by default
  • Works in remote environments (SSH, WSL, Codespaces)

⚙️ Configuration

All settings are defined under customStatusBar.buttonConfig in your settings.json.

🔘 Button Types

1. Standard Button

{
  "type": "button",
  "name": "Save All",
  "icon": "save",
  "command_vscode": "workbench.action.files.saveAll",
  "when": ".*"
}
  • name: Tooltip text
  • icon: VS Code codicon (e.g., save, play, terminal) or emoji (e.g. "🚀")
  • command_vscode: Runs VS Code command
  • command_terminal: (Optional) Shell command
  • task_label: (Optional) Task name from tasks.json
  • when: Regex to match active file path

✅ You can use arrays to run multiple commands:

"command_vscode": [
  "workbench.action.tasks.build",
  "workbench.action.debug.start"
]

2. Dropdown Group

{
  "type": "dropdown",
  "name": "Dev Tools",
  "icon": "tools",
  "items": [
    { "label": "Run Dev", "command_terminal": ["echo Starting...", "npm run dev"] },
    { "label": "Lint Fix", "command_vscode": "eslint.executeAutofix" },
    { "label": "Build All", "task_label": ["clean", "build"] }
  ]
}
  • items: Array of actions with label + any command field(s)
  • Each item can also be an array of commands

3. Workspace Tasks Button

{
  "type": "workspaceTasks",
  "name": "Workspace Tasks",
  "icon": "list-unordered"
}
  • Dynamically loads all tasks from tasks.json
  • Hidden if no tasks exist

🧪 Example Configuration

"customStatusBar.buttonConfig": [
  {
    "type": "workspaceTasks",
    "name": "Workspace Tasks",
    "icon": "list-unordered"
  },
  {
    "type": "button",
    "name": "New Terminal",
    "icon": "terminal",
    "command_vscode": "workbench.action.terminal.new"
  },
  {
    "type": "dropdown",
    "name": "Build",
    "icon": "tools",
    "items": [
      { "label": "Build ARM", "task_label": "Build ARM" },
      { "label": "Build x86", "task_label": "Build x86" }
    ]
  },
  {
    "type": "button",
    "name": "Full Build",
    "icon": "gear",
    "command_vscode": [
      "workbench.action.tasks.clean",
      "workbench.action.tasks.build"
    ]
  }
]

🛠 Usage

  1. Install the extension
  2. (Optional) Edit your settings.json
  3. Reload window or restart VS Code

📦 Packaging & Development

npm install -g vsce
vsce package
code --install-extension custom-status-bar-0.0.1.vsix

💡 Notes

  • Icons use Codicons or emoji
  • Terminal commands support variable substitution ($file, $workspace, etc.)
  • tasks.json is detected automatically if present in .vscode/
  • Arrays supported in: command_vscode, command_terminal, task_label

🧩 License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft