Tutorial

How To Create an Extension Pack for Visual Studio Code

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

Introduction

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

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.

Output from `yo code` with the expension pack project choices

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.

Output showing that the extension 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.

package.json file with the extensionPack line highlighted

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>

Adding Extensions to Your Extension Pack

For demo purposes, we’ll open up the Debugger for Chrome extension in the marketplace.

homepage of the the VS Code Debugger for Chrome extension

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.

showing the highlighted URL with the necessary text for the file

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

the text added to the package.json file after the extensionPack property

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.

extension pack marketplace with the filter section at the bottom

After clicking on that link, you’ll immediately be taken to a list of the most popular extension packs for VS Code.

list of most popular extension packs

For example:

The node.js pack homepage

the Angular essentials pack home page

Conclusion

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.

Creative Commons License