Creating an Extension Pack for Visual Studio Code

Celý článek

Extension Packs in Visual Studio Code are extremely useful when you want to install a collection of related extensions. In this article, let's walk through the steps of creating an Extension Pack so you can share your favorite collection of extensions with other developers!

TLDR

Install the generator-code package on NPM, scaffold a new Extension Pack extension, and add the list of extensions to be included.

For more informtaiton on creating Visual Studio Code extensions, you can read Creating Your First Visual Studio Code Extension or Extension Packs

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just $10!

Install the Tools

To get started created 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

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, identiefier, 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 follow format.

<author>.<extension-name>

Adding Extensions to Your Extension Pack

It took me a bit to find the specific necessary details for a given extension, so let's walk through how. For demo purposes, I'm going to 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 paste it directly into your package.json file! Your updated package.json will look like this.

There ya go. 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.

A couple that stand out to me are the Node.js Extension Pack

and the Angular Essentials extension pack.

Both of which I have used before!

Additionally, I created an extension pack called Web Development Essentials Extension Pack which includes 20+ of the best extensions for Web Developers!

Check out the Web Development Essentials Extension Pack

Check out the source code for the extension, here.

Recap

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. A couple of questions...

Have you ever used an extension pack? Do you have any ideas for a great extension pack?