Extension Guides. Once you have learned the basics of Visual Studio Code Extension API in the Hello World sample, it's time to build some real-world extensions. While the Extension Capabilities section offers high-level overviews of what an extension can do, this section contains a list of detailed code guides and samples that explains how to use a specific VS Code API. For Codespaces, install the Visual Studio Codespaces extension in VS Code, and use the Codespaces: Create New Codespace command. Docker / the Codespace should have at least 4 Cores and 6 GB of RAM (8 GB recommended) to run full build. Get code examples like 'visual studio code html template shortcut' instantly right from your google search results with the Grepper Chrome Extension.

1. Best Visual Studio Code Extension
2. Visual Studio Code Extensions
3. Visual Studio Code Example Extension Tool

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.

Introduction

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.

Prerequisites

• 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.

You will then answer several questions about your project. You will need to choose what kind of extension you are creating and between TypeScript and JavaScript. We will be choosing JavaScript in this tutorial.

Then you’ve got a few more questions.

• name
• identifier
• description
• 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
• extension.js

Open 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.

The .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 'Hello world'.

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 extension.helloworld to extension.createBoilerplate.

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 path modules.

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:

Best Visual Studio Code Extension

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:

Conclusion

To learn more about what APIs there are to use and how to use them, read through the Visual Studio Code Extension API documentation.

Extension packs are a type of extension that simply bundles other extensions that are typically installed together.

For example, rather than hunting down and installing Live Share, Live Share Audio, and Team Chat one by one, you can simply download the Live Share Extension Pack to install all of them for you in one click. Should you want to uninstall all the bundled extensions, uninstalling the pack will automatically remove each extension.

You can browse Software's open source extension packs to see more examples:

Why you should create extension packs

If you are tired of managing an entire toolbox of VS Code extensions, extension packs are a great way to improve your workflow, as well as that of your team and the wider development community.

Easy sharing: Extension packs are easy to share with other developers, whether they are on your team or part of the community. Packs are an easy way to give back to the VS Code community and help others discover new tools.

Better organization: Packs can also help keep track of your own development environments, like a more public version of Settings Sync that can be replicated by anyone on any machine. You can also disable and enable packs to control the extensions when you need them.

Now let’s try building one!

Building your extension pack

If you have never built an extension before, you will need to set up your development environment. You will need to install:

• Node.js, a JavaScript runtime that powers VS Code extensions
• Yeoman, a scaffolding tool that will build the framework for your extension pack
• Visual Studio Code Extension Generator, the Yeoman generator that will help you build your extension

Node.js is a popular open source JavaScript runtime that executes JavaScript outside of the browser. VS Code has support for JavaScript and TypeScript out-of-the-box as well as Node.js debugging. You'll need to have Node.js installed to be able to run your application in debug mode in VS Code. Check out the different installers if you don't already have Node.

There are many different ways to install Node across different platforms, but the most straightforward way to install Node is to use the official installers from the Node website.

You can check that you have Node installed by opening up the terminal and entering node -v. Also make sure that npm, the Node Package Manager that handles package installation for Node tools, is installed with npm -v.

Once you have installed Node, you can install Yeoman and the Visual Studio Code Extension Generator. Together these tools will automatically build the basic framework of your extension with the necessary files.

Yeoman is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects. The Visual Studio Code extension generator will guide you through the process of laying out your extension’s file structure.

To install both Yeoman and the Visual Studio Code Extension Generator, run:

Once you have these three tools installed, open up your terminal, navigate to your project directory, and run:

You will be prompted with the following questions that will help generate the scaffolding for your extension pack.

What type of extension do you want to create?New Extension Pack

Add the currently installed extensions to the extension pack?N

What’s the name of your extension?extension-name

What’s the identifier of your extension?extension-name

What’s the description of your extension?Creating a test pack!

Once you have completed the process, your terminal should look similar to this:

After answering these questions, a project will be created with the following file structure:

If you are interested, read through vsc-extension-quickstart.md to get a quick overview of how extensions are created.

Visual Studio Code Extensions

To start customizing your pack, navigate to package.json, where you will add the unique identifiers of the extensions that will be part of your extension pack. You will see a placeholder key/value pair:

Next, find a few extensions on the marketplace that you think would make a useful pack. Every extension has a unique identifier in the form publisher.extensionName, which can be found on the extensions’ download page in the VS Code marketplace. Look for a section on the right side of the page More Info that will include the unique identifier.

Here’s an example for Code Time, with unique identifier softwaredotcom.swdc-vscode.

Add as many extensions as you need to the extensionPack array in package.json.

As an example, Software's productivity pack looks like this:

Once you’ve added the unique identifiers, you're almost done! Let’s make a few final touches to make your extension pack extra polished for your fans.

Link to a GitHub repository

It is recommended that you add a GitHub repository to your extension pack. Doing so will help you strengthen your GitHub profile and allow other developers who download your pack to easily submit pull requests and file bugs.

First initialize a Git repository with git init in your extension folder and push the project to GitHub. In package.json add a link to the repository:

Design an eye-catching icon

You should also add an icon to your extension pack that will help others identify your extension in their editors and in the marketplace.

Icons must be at least 128px by 128px. You can make icons with Figma, a fantastic free tool for design work. Add your image to your project folder and add the following to package.json:

Write a descriptive README and changelog

Your README will be displayed in the extension marketplace, so it is a great way to describe what problem your extension pack solves, your inspiration for creating it, and the extensions that are included.

You can include links to each individual extension alongside a screenshot of the extension in action. If you are looking for an example, you can see the READMEs for the productivity pack here and the best dark themes pack here.

Similarly, updating the changelog is also helpful for you and the developers that download your pack. You can show which extensions you have added to the current version. The changelog can help you keep track of how the pack changes, should you decide to add more in the future and push an update.

Tidy up your project

Lastly, you should delete vsc-extension-quickstart.md and any other extraneous files before publishing.

Publishing your extension pack

To publish your extension, you’ll need to install Visual Studio Code Extensions, a command line tool for packaging, publishing, and managing extensions. Open up your terminal again and run:

The fastest way to gain access to the VS Code marketplace is to create both a Microsoft account and a publisher profile on the management page for the VS Code marketplace. Here you can create a publisher profile to add your extensions to the marketplace.

Visual Studio Code Example Extension Tool

Once you've created a publisher, be sure to go back to your extension pack and edit the package.json file by adding 'publisher”: “publisher-name” as a new key/value pair using your newly created publisher name.

You now have the option to upload your extension, which will then be available in the VS Code marketplace. Navigate to the directory containing your extension pack and simply run vsce package, which will create a VSIX file. The VSIX file contains all of the information needed to install and run your extension pack. Upload the resulting VSIX file on your publisher management page you created earlier.

If you would like to publish using a more advanced workflow, you can publish directly from the command line, but you’ll need to create an Azure DevOps Organization. You can read more about how to do so in the Visual Studio Code documentation.

Once your extension is approved (a process that should only take a few minutes), return to the publisher management page and find your extension in the VS Code marketplace.