Open your Visual Studio Code extension walkthrough from a command

A great feature that allows your users to get familiar with your extension is the ability for you to create walkthroughs.

Show image

The welcome experience can be seen or opened from the start experience in VS Code.

Show image

But how do you get to the welcome experience when you close the start page? Well, only by the help: get started command, but if you want, you can change this behavior.

Create a welcome experience command

Start by creating a new command for your extension:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  ...,
  "contributes": {
    "commands": [
      {
        "command": "frontMatter.welcome",
        "title": "Welcome",
        "category": "Front matter"
      }
    ]
  }
}

In your extension code, register the command and use the workbench.action.openWalkthrough command to open the walkthrough of your choice.

1
2
3
4
5

vscode.subscriptions.push(
  vscode.commands.registerCommand("frontMatter.welcome", () => {
    vscode.commands.executeCommand(`workbench.action.openWalkthrough`, `eliostruyf.vscode-front-matter#frontmatter.welcome`, false);
  })
);

The second argument is the walkthrough to open. You do this by specifying: <publisher>.<extension name>#<Walkthrough ID>. The third argument is a boolean that defines if you want to open it in the same view (false) or split view (true).

Once implemented, you can execute your custom welcome command.

Show image

This should result in opening the view:

Show image