Visual Studio Code is highly extensible and customizable. Take a look at some of the extensions that make Python development in VSCode a better experience. Python by Microsoft. Of course, Visual Studio Code doesn’t replace Visual Studio; there are still a few things that Visual Studio does on a much deeper level than Visual Studio Code. For instance, you can’t write cross-platform Xamarin mobile apps in Visual Studio Code (at least not at the time of this writing).
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.
Visual Studio Code is a code editor from Microsoft available on Windows, Linux, and macOS. It offers extensions that you can install through the Visual Studio Code MarketPlace for additional features in your editor. When you can’t find an extension that does exactly what you need, it is possible to create your own. In this article, you’ll create your first Visual Studio Code extension.
- Node.js installed on your machine following How To Install Node.js and Create a Local Development Environment.
Installing the Tools
The Visual Studio Code team created a generator for creating extensions, which generates all of the necessary starter files to begin creating your extension.
To get started, you’ll need to have Yeoman installed, which is a scaffolding tool. You can install Yeoman by running
With Yeoman installed, now you need to install the specific generator for Visual Studio Code extensions:
Creating Your First Extension
You are now ready to create your first extension. To do so, run the following command.
Then you’ve got a few more questions.
- type checking (yes)
- do you want to initialize a git repository (yes)
After this process is complete, you’ve got all of the files you need to get started. Your two most important files are:
package.json and let’s take a look. You’ll see the name, description, and so on. There are two more sections that are very important.
activationEvents: this is a list of events that will activate your extension. Extensions are lazy loaded so they aren’t activated until one of these activation events occur.
commands: list of commands that you provide the user to run via your extension.
We will come back to these shortly.
You can also take a look at the
extension.js file. This is where we are going to write the code for our extension. There’s some boilerplate code in here, so let’s break it down.
In the highlighted line below is where our command is being registered with VS Code. Notice that this name
extension.helloworld is the same as the command in
package.json. This is intentional. The
package.json defines what commands are available to the user, but the
extension.js file registers the code for that command.
In this Hello World example, all this command will do is display a Hello World message to the user.
Debugging Your Extension
Now that we have all of the necessary files installed, we can run our extension.
.vscode folder is where VS Code stores configuration files of sorts for your project. In this case it includes a
launch.json that contains debug configurations.
From here, we can debug. Open the debug tab on the left on the left of your screen, and then click play.
This will open up a new (debug) instance of VS Code.
With this debug instance of VS Code open, you can open the command palette with
Cmd + SHIFT + P on Mac or
CTRL + SHIFT + P on Windows and run
You’ll see a hello world message pop up in the lower right hand corner.
Editing Your Extension
Before we work on code, let’s take one more look at the
activationEvents section in the
package.json file. Again, this section contains a list of events that will activate our extension whenever they occur. By default, it is set to activate when our command is run.
In theory, this event could be anything, and more specifically
* anything. By setting the activation event to
* this means your extension will be loaded when VS Code starts up. This is not required by any means, just a note.
We’ve got the necessary files and we know how to debug. Now let’s start building our extension. Let’s say we want this extension to be able to create an HTML file that already has boilerplate code in it and is added into our project.
Let’s first update the name of our command. In
extension.js, update the name of the command from
Now, update the
package.json file accordingly witht he change in command.
Now, let’s write our functionality. The first thing we’ll do is require a couple of packages. We are going to use the
fs (file system) and
We also need to get the path to the current folder. Inside of the command, add the following snippet:
We will also need to store our boilerplate HTML code into a variable so that we can write that to a file. Here’s the boilerplate HTML:
Now we need to write to the file. We can call the
writeFile function of the file system module and pass in the folder path and HTML content.
Notice that we use the path module to combine the folder path with the name of the file we want to create. Then inside of callback, if there is an error, we display that to the user. Otherwise, we let the user know that we created the boilerplate file successfully:
Here’s what the full function looks like:
Go ahead and debug your newly developed extension. Then, open up the command palette and run “Create Boilerplate” (remember we changed the name).
After running the command, you’ll see the newly generated
index.html file and a message to let the user know:
To learn more about what APIs there are to use and how to use them, read through the Visual Studio Code Extension API documentation.
In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed, then install Yeoman and VS Code Extension Generator with:
Then, inside the editor, press F5. This will compile and run the extension in a new Extension Development Host window.
Run the Hello World command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) in the new window:
You should see the
Hello World from HelloWorld! notification showing up. Success!
Developing the extension
Let's make a change to the message:
- Change the message from
Hello World from HelloWorld!to
Hello VS Codein
- Run Developer: Reload Window in the new window
- Run the command Hello World again
You should see the updated message showing up.
Here are some ideas for you to try:
- Give the Hello World command a new name in the Command Palette.
- Contribute another command that displays current time in an information message. Contribution points are static declarations you make in the package.json Extension Manifest to extend VS Code, such as adding commands, menus, or keybindings to your extension.
- Replace the
vscode.window.showInformationMessagewith another VS Code API call to show a warning message.
Debugging the extension
VS Code's built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Run view in the left to check a variable's value. The Debug Console allows you to evaluate expressions.
Best Visual Studio Code Extension
You can learn more about debugging Node.js apps in VS Code in the Node.js Debugging Topic.
In the next topic, Extension Anatomy, we'll take a closer look at the source code of the
Hello World sample and explain key concepts.
You can find the source code of this tutorial at: https://github.com/microsoft/vscode-extension-samples/tree/master/helloworld-sample. The Extension Guides topic contains other samples, each illustrating a different VS Code API or Contribution Point.
Visual Studio Code Extension Development