CODEWITHSUNDEEP
javascriptnode.jstypescriptvisual-studio-codevscode-extensions
Beno Odr
Beno Odr

Reputation: 1273

VSCode extension use multi step input directly

I want to use the multi step input directly, for example user choose F1 - and start the steps to choose items.

Currently I found the following example, and remove the quickOpen and basic input

https://github.com/microsoft/vscode-extension-samples/blob/master/quickinput-sample/src/extension.ts

import { window, commands, ExtensionContext } from 'vscode';
import { multiStepInput } from './multiStepInput';

export function activate(context: ExtensionContext) {
    context.subscriptions.push(commands.registerCommand('samples.quickInput', async () => {
        const options: { [key: string]: (context: ExtensionContext) => Promise<void> } = {
            multiStepInput,
        };
        const quickPick = window.createQuickPick();
        quickPick.items = Object.keys(options).map(label => ({ label }));
        quickPick.onDidChangeSelection(selection => {
            if (selection[0]) {
                options[selection[0].label](context)
                    .catch(console.error);
            }
        });
        quickPick.onDidHide(() => quickPick.dispose());
        quickPick.show();
    }));
}

However, when I start the extension I got the first step multiStepInput entry to choose, I want to avoid it and start directly from the options to choose resource group,(from the example) How can I do it? I'm not able to omit the first (dummy) step when the user should choose the following, 

    showQuickPick,
    showInputBox,
    multiStepInput,
    quickOpen,

As I directly want to use explicitly the multiStepInput and not ask to choose it

https://github.com/microsoft/vscode-extension-samples/blob/master/quickinput-sample/src/multiStepInput.ts#L24

I dont want to start from this

enter image description here

I want to start from this when the user use F1

enter image description here

Upvotes: 3

Views: 3411

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29337

Currently the first time options are [multiStepInput]

const options = { multiStepInput }

If you don't want to show that step, set options as the options you really want of type QuickPickItem)

Something like that:

commands.registerCommand('samples.quickInput', async () => {
  const options = ['vscode-data-function', 'vscode-appservice-microservices', 'vscode-appservice-monitor', 'vscode-appservice-preview', 'vscode-appservice-prod'].map(label => ({label}));
  const quickPick = window.createQuickPick();
  quickPick.items = options;
  quickPick.onDidChangeSelection(([{label}]) => {
    window.showInformationMessage(label);
    quickPick.hide();
  });
  quickPick.show();
})

Screen Record

Update If you just want to skip the first quick input and start the multiStepInput right away, you can delete all the rest of the code in the command handler and just use this

context.subscriptions.push(commands.registerCommand('samples.quickInput', async () => {
  multiStepInput(context);
}));

Which is equivalent to

options[selection[0].label](context)

Because options[selection[0].label] is multiStepInput when multiStepInput is chosen.

Upvotes: 4

Related Questions