Quick Command Toolbar

A VS Code extension that adds custom command buttons to the status bar. Run shell commands in the terminal or built-in VS Code commands (the same ids used by the Command Palette and keyboard shortcuts) with one click—optionally as single or grouped steps—with Codicons, optional label color, and Global / Workspace / Local storage scopes.

Features

• Status bar buttons — One-click run from the status bar (with optional colored label text).
• VS Code / editor commands — For a single button (or each row in a group), choose Run as → VS Code command (editor) and enter a command id such as editor.action.commentLine or editor.action.blockComment. The extension runs vscode.commands.executeCommand, so the action applies to the active editor (same behavior as a keybinding when the editor has focus).
• Command manager — Webview UI to add, edit, enable/disable, delete, search, and scope-filter commands. Add Button is always in the header next to Refresh so you can add more commands after the first one in each scope.
• Single or group commands — One line, or multiple rows with per-row Run as (terminal shell vs VS Code command), optional terminal name, and optional shortcut metadata.
• Grouped execution — Run group steps one-after-another or all at once (terminal lines sent to terminals; VS Code command steps run via the command service).
• Icons — Picker backed by the full Codicon set shipped in resources/codicon.css (status bar uses $(icon) codicon IDs).
• Scopes — Global (User settings), Workspace, and Local (workspace folder) lists are stored separately and merged for the toolbar.
• Terminal options — Default terminal name, optional “always create new terminal” for single-command entries.
• Persistence — Saved under qct.buttons in the appropriate settings layer (see Configuration).

Installation

From a .vsix (local or CI build)

1. Build or obtain quick-command-toolbar-<version>.vsix from package.json (see Development / Packaging).
2. In VS Code: Extensions → ... → Install from VSIX...
3. Reload the window if prompted.

From source (F5 / Extension Development Host)

Open this folder in VS Code and press F5, or run:

code --extensionDevelopmentPath="path/to/quick-command-toolbar"

Usage

Status bar

After activation you should see QCT in the status bar, then your custom buttons:

[QCT] | [Your commands ...]

• QCT — Opens the manager.
• Custom button — Runs the configured action: terminal (shell) and/or VS Code command depending on each button’s Run as setting.

Commands (Command Palette)

Creating a command

1. Run QCT: Open Manager or QCT: Add New Command (or Add Button in the manager header).
2. Choose Single Command or Group Commands.
3. Set Command Name and pick an Icon.
4. For Single:
   • Run as → Terminal (shell) — Enter a shell command (e.g. npm run dev), optional terminal name, and optional Always create new terminal.
   • Run as → VS Code command (editor) — Enter the VS Code command id in the field (e.g. editor.action.commentLine, editor.action.blockComment, editor.action.formatDocument). Keep the text editor focused when you click the status bar button so the command targets the right editor (same as using a keyboard shortcut bound to that command).
5. For Group: add one or more rows. Each row has Run as (terminal vs VS Code command), name, command line or command id, optional terminal (for terminal rows), and optional shortcut metadata. Toggle Execute all commands simultaneously if needed.
6. Optional Color tints the status bar label; optional top-level Shortcut is stored as metadata (see Keyboard shortcuts).
7. Save returns to the manager; the new id is derived from the command name unless you edit an existing entry.

VS Code command buttons (editor actions)

Use this when you want a status bar shortcut to the same actions normally triggered by keyboard shortcuts or the Command Palette:

To discover ids: File → Preferences → Keyboard Shortcuts, search for the action, right-click the binding → Copy Command Id (wording may vary by VS Code version), or check extension docs.

Delete in the manager asks for confirmation in a native modal (not the webview), then removes the button from the correct scope.

Finding command IDs

• Keyboard Shortcuts UI — search for the command and copy its id when available.
• Command Palette — some commands show their id in documentation; many built-in editor commands follow editor.action.*.

Invalid ids show an error notification when the button is run.

Scopes (Global / Workspace / Local)

• Global — Stored in User settings (qct.buttons global value).
• Workspace — Stored in the workspace settings file.
• Local — Stored for the first workspace folder (workspace folder settings).

The status bar shows all commands from the three buckets. The manager tabs filter the list so you only edit one bucket at a time.

Configuration

Settings key: qct.buttons — array of command objects.

Other keys:

• qct.defaultTerminal — Default terminal name when none is set on a command.
• qct.showInStatusBar — Reserved for future use (toolbar always uses status bar today).

Examples

Single command (terminal)

{
  "id": "npm-dev",
  "label": "Dev",
  "command": "npm run dev",
  "icon": "play",
  "commandType": "single",
  "executionMode": "terminal",
  "scope": "workspace"
}

Single command (VS Code / editor)

Same kind of button as a keybinding: clicking runs the command in the active editor.

{
  "id": "toggle-line-comment",
  "label": "Line comment",
  "command": "editor.action.commentLine",
  "icon": "edit",
  "commandType": "single",
  "executionMode": "vscode-command",
  "scope": "global"
}

Grouped commands

{
  "id": "build-and-test",
  "label": "Build & Test",
  "command": "",
  "icon": "tools",
  "commandType": "group",
  "executeAllSimultaneously": false,
  "groupCommands": [
    { "name": "Build", "command": "npm run build", "executionMode": "terminal" },
    { "name": "Format", "command": "editor.action.formatDocument", "executionMode": "vscode-command" },
    { "name": "Test", "command": "npm test", "terminal": "Tests", "executionMode": "terminal" }
  ],
  "scope": "workspace"
}

Keyboard shortcuts

The shortcut field in the UI is stored on the command object for display/reference. To bind keys in VS Code, use File → Preferences → Keyboard Shortcuts and assign keys to a command that runs your workflow, or use a generic task/run approach. (Dedicated qct.run.<id> commands are not generated in this version.)

Development / Packaging

npm install
npm run compile
npm run package

This runs TypeScript compile and produces quick-command-toolbar-<version>.vsix in the project root (version from package.json).

Publish to the Marketplace using vsce with your publisher token after vsce login.

File structure

quick-command-toolbar/
├── extension.ts          # Main extension + webview HTML
├── package.json
├── tsconfig.json
├── resources/
│   ├── icon.png
│   ├── codicon.css
│   └── codicon.ttf
└── out/
    └── extension.js      # Compiled output

Troubleshooting

• Nothing in status bar — Run QCT: Refresh Toolbar or reload the window; ensure the command is enabled and you are in a scope that has entries.
• Save does nothing — Check the notification area for errors (duplicate id, or settings write issues). Ensure a folder is open if you use Workspace or Local scope.
• Icons — Use valid Codicon names (see Codicons).
• Wrong scope list — Remember: Global vs Workspace vs Local are separate lists; switch tabs in the manager to edit the right bucket.
• VS Code command does nothing — Focus the text editor (not the terminal or webview) before clicking the status bar button; many editor.* commands only apply when an editor is active.

License

MIT — see LICENSE.md.