VSCode: How to create your own Extension Pack

4 min readJan 20, 2019

I use several JavaScript/CSS VSCode extensions for my daily work to help me increase my productivity and make my life easier. I came across few more extensions and decided to share my favorite extensions with my team. Since the extension list was long, I wanted a quick and easy way to share. I learned about Extension Pack in VSCode and decided to use it for the purpose.

What is an Extension Pack?

An extension Pack is an extension in itself that bundles together a collection of other extensions. When you install an extension pack, you install a set of extensions together. It provides a way to share your favorite extension with others quickly and easily. Down the line, if you decide to add or remove an extension you can do so and distribute again.

Let’s get started.

Extension Pack Code Generation

Creating an extension pack is easy and only takes few steps. Before you start generating a VSCode extenstion, you will need Node.js installed. Then, install yoeman and VSCode extension code generator.

npm install -g yo generator-code

Followed by the above install is the extension pack code generation. Run the following command and follow the prompt to fill in desired values:

yo code

Choose “New Extension Pack” from the list to proceed. Select Yes if you want to include your currently installed extensions to the extension pack. Here, I’m going to select No and add the extensions later.

After the process is complete, change the directory to the extension pack myfirstextensionpackand open it on VSCode editor by entering code . on the console. Once on the editor, open package.jsonand you will find a section to enter your favorite extensions Ids to include in your extension pack.

Some of my favorite extensions are:

Adding extension Ids to “extensionPack”

You can now start adding extension ids into “extensionPack”. You can find extension ids at the end of the extension url. For example, the link to GitLens extension marketplace is https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens and the id is eamodio.gitlens. I added only two extension ids but you can add more.

Auto-rename and GitLens extensions added to the pack

Packaging

Next step is to generate a VSIX file that will let you distribute and install the extension pack. You can also publish VSIX file to the VSCode marketplace but we will skip that for another day . Use the command below to generate the file:

vsce package

Make sure you have “publisher” name set in the package.json and edit README.md before you start packaging. You can give any package name since you will not be publishing the extension pack at this time.

While packaging, it may ask you to enter a Git repository but you can skip it. If everything goes well a VSIX file should be generated in the same path as your package.json file.

Internal distribution and installation

Double click on VSIX file to install. If the installation fails, install it from within VSCode. Follow the steps to install manually:

Select Extensions (Ctrl + Shift + X)
Open “More Action” menu(ellipsis on the top) and click “Install from VSIX…”
Locate VSIX file and select
Reload VSCode

Yay! The extension pack is installed and you can start using the extensions.