Tutorial

How To Create an Extension Pack for Visual Studio Code

Published on December 12, 2019
How To Create an Extension Pack for Visual Studio Code

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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.

  1. npm install -g yo

Then, you can install the code generator tools for VS Code extensions like so.

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel