How To Create an Extension Pack for Visual Studio Code

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.

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 generator-code

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 extensionPack property.

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.

<author>.<extension-name>

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: msjsdiag.debugger-for-chrome.

From there, you can copy that text and add it directly into your package.json file.

You can follow that same process to include as many extensions as you want.

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.

For example:

• Node.js Extension Pack

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