How To Create an Extension Pack for Visual Studio Code
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.
Extension Packs in Visual Studio Code are useful when you want to install a collection of related extensions. In this article, you’ll create an Extension Pack so you can share your collection of extensions with other developers.
Installing the Tools
To get started creating an Extension Pack, you will need to install the Yeoman scaffolding CLI tools as well as the code generator for VS Code. You can install Yeoman with the following command.
- npm install -g yo
Then, you can install the code generator tools for VS Code extensions like so.
- npm install -g code-generator
Generating a New Extension Project
With the correct tools installed, you are now ready to generate a new Extension Pack project. You can start this process by running the following command.
- yo code
You will quickly be prompted to choose what type of extension you are creating. In this case, choose
New Extension Pack.
After that, you will be asked several different questions about your extension such as the name, identifier, and description. After answering all of the questions, you will receive confirmation that your project has been generated.
After opening the new project in VS Code, you’ll want to take a look at the
package.json file. Pay specific attention to the
Inside of this property is where you will list each of the extensions that should be included in your Extension Pack. For each extension, you’ll need to include the publisher and the name of the extension in the following format.
Adding Extensions to Your Extension Pack
For demo purposes, we’ll open up the Debugger for Chrome extension in the marketplace.
You can search on that page to find the information you need, but there is an even easier way. If you look at the url for the extension, the last bit of text after “itemName=” is exactly what you need:
From there, you can copy that text and add it directly into your
You can follow that same process to include as many extensions as you want.
Helpful Extension Packs
It might be worth doing a bit of research to see what extension packs already exist before creating your own. You can start by opening up the Code Marketplace. If you scroll down to the bottom you’ll see a button to filter by Extension Packs.
After clicking on that link, you’ll immediately be taken to a list of the most popular extension packs for VS Code.
- Angular Essentials extension pack.
Creating an extension pack for Visual Studio Code is pretty easy. They provide all of the scaffolding, so all you have to do is add the list of extensions to be included.