Creating Your Own Visual Studio Code Extension | A Step By Step Guide

An extension is a piece of software that adds some additional functionality to an existing software application. In the case of Visual Studio Code (VSCode), extensions are small programs that add features to the code editor, such as support for additional programming languages, modification of color scheme(theme), code formatting, linting tools, and debugging and testing tools. These extensions can be created by anyone and can be published on Visual Studio Code Marketplace, where they can be browsed, downloaded, and installed.

In this post, we're going to create your first VSCode extension. So let's get started.

Prerequisites

Before we get started, you will need to have Node.js installed on your system. You can download the latest version of Node.js from the official website. Installation is pretty straightforward. Once installation is complete you can run the following commands to verify if Node.js and npm are working correctly on your computer.

$ npm -v
$ node -v

You're good to go if you see the versions of Node.js and npm in the command line.

Installing Yeoman

Next, install Yeoman (a tool for generating and scaffolding modern web applications) on your computer using the following command.

npm install -g yo generator-code

You'll need Node.js installed on your computer to run the above command.

To verify if Yeoman is installed successfully run the following command.

yo --version

If everything goes well, you'll see the version of Yeoman installed on your computer.

Scaffolding Extension

Now, let's generate the extension shell using the following command,

yo code

This will start the installation wizard on the command line, starting with What type of extension do you want to create? For the sake of this tutorial, we'll select New Extension (TypeScript) option.

Next, it'll ask for the name of the extension (What's the name of your extension?). We'll simply call it HelloCode. After the name it'll ask for an identifier and description, we'll set the identifier as hellocode and leave the description empty. It'll also ask if you want to Initialize a git repository, Bundle the source code with webpack, and Which package manager to use. We'll say yes for the git repository, no to webpack, and npm for the package manager. 

After providing answers to all the questions in the wizard your console output will look something like this.

After you answer the last question it'll start the scaffolding process. Once complete, it'll log a success message in the console along with the following prompt.

Select the first option, Open with `code`. This will open the extension you created in a VSCode instance.

Compiling Extension

To compile and run this extension, go to the Run menu and select the Start Debugging option.

Alternatively, you can also click the F5 button for the same. 

This will open another instance of Visual Studio Code in debug mode with your extension loaded in this instance.

Now, let's run the hello world command that comes bundled with the extension we just created. In this debug mode instance of VSCode press Ctrl + Shift + P to open the command palette and search for the Hello World command.

As soon as you select this command, you'll see a notification at the bottom right corner of the screen with the message, Hello World from HelloCode!

Modifying Extension

The hello world command you just triggered comes pre-written with the extension we just created. Now let's see where this command is written and update this command to understand this in detail. For this first close the debug instance of VSCode and go back to the extension's source code.

In this root of your extension, you'll see an src folder which consists of the extension.ts file. This file consists of activate function which contains a call to the showInformationMessage method. The parameter passed to this method is the message we see when we run the hello world program. Now, let's change this parameter from Hello World from HelloCode! to Hello C# Corner and hit the save button.

Now, start the debug mode with F5 and run the hello world program, and this time you'll see the Hello C# Corner message.

Adding New Command To Extension

Now, let's understand how these commands work by adding an entirely new command to our extension. To add a new command go to the extension.ts file and add the following code inside the activate function.

let disposable2 = vscode.commands.registerCommand('hellocode.welcome', () => {
  vscode.window.showInformationMessage('Welcome to C# Corner Community!');
});

context.subscriptions.push(disposable2);

The above command will register a new welcome command using the registerCommand method. This method accepts two parameters. The name of the command which in our case is hellocode.welcome and a callback function that is triggered every time someone fires the command. And the callback function simply calls the showInformationMessage method to display a notification on the screen.

There's one more thing you need to do to make this command work. You need to make Visual Studio Code aware of this command by adding the details of this command to the package.json file located inside the root of the extension folder. Inside the package.json file you need to specify this command inside the commands array within the contributes object.

"contributes": {
    "commands": [
      .
      .
      .
      .
      {
        "command": "hellocode.welcome",
        "title": "Welcome to C# Corner"
      }
    ]
  },

And that's it! Now let's give this a try. Open the debug mode (using F5) and trigger the command from the command palette.

This will show a notification message as we mentioned in the extension.ts file.

I hope you enjoyed creating your first Visual Studio Code extension. In case you have any queries or feedback feel free to drop a comment or ping me on Twitter @harshalslimaye.