visual-studio-codevscode-extensionsvscode-keybinding

How to add a keybinding to a QuickPickItem in a VsCode Extension


In VsCode UX guidelines page there is an example that shows a keybinding in a QuickPickItem.

VsCode UI with a keybinding in the QuickPickItem

However, I cannot found any option in VsCode API to add it. I am only able to add this type of keybindings in commands in the file package.json

"keybindings": [
  {
    "command": "extension-name.option1",
    "key": "ctrl+g", 
    "mac": "cmd+g",   
    "linux": "ctrl+g",
    "win": "ctrl+g"   ,
  }

Is it possible to add the keybinding and the icon of the shortcut at the top right of the QuickPickItem like it's shown in the example?

Important, this should not only work, but be visible like in the example.


Solution

  • I have the feeling that screenshot is invalid, and does not represent real APIs.

    AFAIK, you can only declare keybindings for commands, which must be declared upfront in package.json. But elements in items presented in a QuickPick are not declared in package.json. Instead, you populate them via code. Unless you can assign a Command to some QuickPickItem (which I don't remember to be possible), there is no way to acomplish that screenshot.

    On the other hand, you may add buttons you your QuickPickItems (https://code.visualstudio.com/updates/v1_63?ref=refind#_quick-pick-api-improvements). It's not the same thing, but it allows you to give alternative commands to each QuickPickItem available to the user.