Open your Visual Studio Code extension walkthrough from a command

July 25, 2022

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

Walkthrough experience
Walkthrough experience

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

VS Code - Get started
VS Code - Get started

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.

Welcome command
Welcome command

This should result in opening the view:

Walkthrough experience
Walkthrough experience

Comments

comments powered by Disqus