Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set scroll up/down keybindings for quickPick menu in vscode?

Introduction

I am creating an extension in Visual Studio Code that creates a 'quickPick' menu from which the user can select options:

enter image description here

I can use the up and down arrows to scroll through the list, but I want to be able to bind this to something more home-row friendly like ctrl-n and ctrl-p. I have ctrl-n and ctrl-p already bound for scroll up/down on the main command menu (ctrl-shift-p), and I was hoping the quick pick would fall under this rule as well. Unfortunatley, none of my many ctrl-n context bindings are taking effect.

I'm hoping for something I can add to 'keybindings.json' that looks something like:

 {
        "key": "ctrl+n", 
        "command": "cursorDown", 
        "when": "quickPickFocus"
    }, 

But I can't see anything like this when browsing through the "Default Keyboard Shortcuts".

Questions

  1. How do you create key bindings for quick pick lists?

  2. Can I possibly create a custom "when" context for my extension? Then I can specify something like:

    "when" : "myExtensionIsActive && blah"

Additional Doc

Here are all the overridden ctrl-n key bindings in my keybindings.json:

    {
        "key": "ctrl+n", 
        "command": "cursorDown", 
        "when": "editorTextFocus"
    }, 
    {
        "key": "ctrl+n", 
        "command": "workbench.action.quickOpenNavigateNext", 
        "when": "inQuickOpen"
    }, 
   {
        "key": "ctrl+n", 
        "command": "showNextParameterHint", 
        "when": "editorTextFocus && parameterHintsVisible"
    }, 
   {
        "key": "ctrl+n", 
        "command": "selectNextQuickFix", 
        "when": "editorFocus && quickFixWidgetVisible"
    }, 
    {
        "key": "ctrl+n", 
        "command": "selectNextSuggestion", 
        "when": "editorTextFocus && suggestWidgetVisible"
    }, 

Here is the code where I create the quickPick:

 var themeList = this.getThemeList()
  vscode.window.showQuickPick(themeList)
    .then(val => {
      // Update the status bar
      this.cmdChannel.text = `Theme: ${val}`
      this.cmdChannel.show(); 
    });
like image 322
vt5491 Avatar asked Aug 27 '16 06:08

vt5491


1 Answers

You just add wrong key binding command and when, please try to add this to your keybindings.json

        {
            "key": "ctrl+n",
            "command": "workbench.action.quickOpenSelectNext",
            "when": "!editorFocus"
        },
        {
            "key": "ctrl+p",
            "command": "workbench.action.quickOpenSelectPrevious",
            "when": "!editorFocus"
        }
like image 140
Junv Avatar answered Oct 07 '22 00:10

Junv