27 Integration into Command Palette, Shortcuts, Menus

27.1 From Extension to Visible VSCode Integration

A VSCode extension without UI integration remains invisible to users. Eclipse developers are familiar with the plugin system using separate XML files for commands, menus, and key bindings. VSCode simplifies this through a central JSON system in package.json, which manages all UI integration points.

The three main integration methods serve different user types: command palette for discovering new features, keyboard shortcuts for experienced users, and context menus for situational actions. The interplay of these three mechanisms determines the success or failure of an extension.

27.2 Command Palette: Central Feature Discovery

The command palette makes all available commands accessible through a search interface. These commands compete with all other VSCode functions, so meaningful names and categorization are critical.

{
  "contributes": {
    "commands": [
      {
        "command": "code-tools.analyze-quality",
        "title": "Analyze Code Quality",
        "category": "Code Tools",
        "icon": "$(search)"
      }
    ],
    
    "menus": {
      "commandPalette": [
        {
          "command": "code-tools.analyze-quality",
          "when": "editorIsOpen && editorLangId =~ /(typescript|javascript)/"
        }
      ]
    }
  }
}

The category appears as a prefix in the palette: “Code Tools: Analyze Code Quality”. Users can search by both the category and the title. The when clause controls contextual visibility and prevents irrelevant commands from cluttering the palette.

27.3 Keyboard Shortcuts: Direct Access for Power Users

Keyboard shortcuts provide direct access to frequently used functions and must be defined per platform. Since they are globally active, they require careful conditioning through when-clauses.

{
  "contributes": {
    "keybindings": [
      {
        "command": "code-tools.analyze-quality",
        "key": "ctrl+shift+a",
        "mac": "cmd+shift+a",
        "when": "editorTextFocus && editorLangId == typescript"
      }
    ]
  }
}

The platform distinction between key (Windows/Linux) and mac considers different modifier keys. VSCode also supports multi-step combinations (chord keys) with the syntax ctrl+k ctrl+m, where keys are pressed sequentially. Use keyboard shortcuts sparingly and avoid overwriting established VSCode standards like F2 (Rename) or F5 (Debug).

27.4 Menu Integration: Contextual Placement

VSCode offers various menu contexts for different application scenarios. The most important are the editor context menu (right-click in the editor) and explorer context menu (right-click on files/folders).

{
  "contributes": {
    "menus": {
      "editor/context": [
        {
          "command": "code-tools.analyze-quality",
          "when": "editorHasSelection && editorLangId == typescript",
          "group": "navigation@1"
        }
      ],
      
      "explorer/context": [
        {
          "command": "code-tools.analyze-quality", 
          "when": "explorerResourceIsFolder",
          "group": "2_workspace@1"
        }
      ]
    }
  }
}

The group system controls position and visual separation. Lower numbers appear higher up, and different groups are separated by dividers. The notation navigation@1 means group “navigation”, position 1 within this group.

27.5 When-Clauses and Context Keys

When-clauses determine when commands are visible and available. The most important context keys for extension development are:

These conditions can be combined using logical operators: && (and), || (or), ! (not). Regular expressions are available for editorLangId and resourceExtname: editorLangId =~ /(typescript|javascript)/.

27.6 Best Practices for UI Integration

Systematic integration follows proven patterns that optimize user experience and performance:

VSCode offers the Context Inspector via the command palette for debugging complex when-clauses. Test your integration on all three platforms, as key combinations and context behavior may vary.