VSCode use quickpick list items with description

user_10816571 0
Viewed 2375

I've created vscode extension with quickpick, the quickpick show list of items

const pick = await input.showQuickPick({
            title,
            step: 1,
            totalSteps: 3,
            placeholder: 'Choose runtime',
            items: Runtimes,
            activeItem: typeof state.resourceGroup !== 'string' ? state.resourceGroup : undefined,
            // buttons: [createResourceGroupButton],
            shouldResume: shouldResume
        });

Now I was able to show list of data which user can choose like

aaaa
bbbb
cccc

My question if there is a way to show the data with name and description ?

like

aaaa            desc for aaaa  
bbbb            desc for bbbb
cccc            desc for cccc

I mean to add additional info to the list? like maybe key value https://code.visualstudio.com/api/references/vscode-api#QuickPick

if it's not possible, please let me know

for example the test1/2 is the value which I want to add to each entry

enter image description here

vscode-extensions visual-studio-code typescript node.js javascript
2 Answers

VSCode showQuickPick can take string[] (string array) or QuickPickItem array as items. I think you are looking for QuickPickItem.

Check VSCode examples, where the usage of QuickPickItem is shown.

The result would look something like below: enter image description here

where:

  • left most string is the label
  • right most string is description
  • bottom left string is detail

The looks of the default Quick Pick provided do not allow floating labels to left or right, they are all left-aligned and follow the LTR layout.

P.S. You can try window.createQuickPick, but again it gives you more control over the popup, and not the styling of the popup.

user_28491270

You need to create a class that implements QuickPickItem and then pass a list of those objects to the showQuickPick.

So something like this

class MyItem implements QuickPickItem {
  label: string;
  description = '';
  
  constructor(public detail: string, name: string) {
    this.label = `Custom ${name}`;
  }
}

// in your code assuming you have a list of items that you map to this object
  const options = items.map((item) => {
    return new MyItem(
      item.desc,
      item.name,
    );
  });

// this window is imported from 'vscode'
  const pick = await window.showQuickPick(options, {
    title,
    canPickMany: false,
    // any other properties you need
  });
user_2525580
Related