Create your own Extension Pack for Visual Studio Code

#development #extensions #productivity #tools

I use multiple VSCode extensions to increase my productivity daily. When we wanted to standardize development in an important project and implement a basic set of necessary extensions, we found it necessary to create an Extension Pack. This way we could better manage the list of required extensions.

What is an Extension Pack?

It's a single extension that groups other extensions together. When installing the pack, all included extensions are installed together. It's ideal for:

Sharing your favorite tools with colleagues
Maintaining consistent configurations across teams
Easily updating collections

Prerequisites

Install Node.js
Install Yeoman and the VSCode generator:

Generate your Extension Pack

Run the generator:
Select "New Extension Pack"
Choose whether to include your current extensions (I selected No to customize later)

Add your extensions

Open the generated project in VSCode (code .)
Edit package.json and add the extension IDs to the extensionPack array:

My favorite extensions:

Your Pack Icon

Note that I added the icon field in the package.json file, with the path img/essentials.png, so if you create a folder with that name, you can put an icon with that filename there. It should be 250px x 250px, so it's identifiable when installed.
1. Example:

Package your extension

Make sure publisher is configured in package.json
Run:
A .vsix file will be generated in your project

Note: You can publish to the VSCode Marketplace by following the official documentation.

Install your pack

Manual installation in VSCode

Open Extensions (Ctrl+Shift+X)
Click on the ⋮ menu → Install from VSIX...
Select your .vsix file
Restart VSCode

Now your entire team can enjoy your extensions with just one click!

Tips

Update the README.md to explain the purpose of the pack
Add a License file
Use semantic versioning when updating
Evaluate whether it's necessary to publish in the Marketplace to share it widely or not.