How to Create an Extension Pack for Visual Studio Code
Extension packs are a type of extension that simply bundles other extensions that are typically installed together.
For example, rather than hunting down and installing Live Share, Live Share Audio, and Team Chat one by one, you can simply download the Live Share Extension Pack to install all of them for you in one click. Should you want to uninstall all the bundled extensions, uninstalling the pack will automatically remove each extension.
You can browse Software's open source extension packs to see more examples:
Why you should create extension packs
If you are tired of managing an entire toolbox of VS Code extensions, extension packs are a great way to improve your workflow, as well as that of your team and the wider development community.
Easy sharing: Extension packs are easy to share with other developers, whether they are on your team or part of the community. Packs are an easy way to give back to the VS Code community and help others discover new tools.
Better organization: Packs can also help keep track of your own development environments, like a more public version of Settings Sync that can be replicated by anyone on any machine. You can also disable and enable packs to control the extensions when you need them.
Now let’s try building one!
Building your extension pack
If you have never built an extension before, you will need to set up your development environment. You will need to install:
- Node.js, a JavaScript runtime that powers VS Code extensions
- Yeoman, a scaffolding tool that will build the framework for your extension pack
- Visual Studio Code Extension Generator, the Yeoman generator that will help you build your extension
Node.js is a popular open source JavaScript runtime that executes JavaScript outside of the browser. VS Code has support for JavaScript and TypeScript out-of-the-box as well as Node.js debugging. You'll need to have Node.js installed to be able to run your application in debug mode in VS Code. Check out the different installers if you don't already have Node.
There are many different ways to install Node across different platforms, but the most straightforward way to install Node is to use the official installers from the Node website.
You can check that you have Node installed by opening up the terminal and entering node -v. Also make sure that npm, the Node Package Manager that handles package installation for Node tools, is installed with npm -v.
Once you have installed Node, you can install Yeoman and the Visual Studio Code Extension Generator. Together these tools will automatically build the basic framework of your extension with the necessary files.
Yeoman is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects. The Visual Studio Code extension generator will guide you through the process of laying out your extension’s file structure.
To install both Yeoman and the Visual Studio Code Extension Generator, run:
npm install -g yo generator-code
Once you have these three tools installed, open up your terminal, navigate to your project directory, and run:
yo code
You will be prompted with the following questions that will help generate the scaffolding for your extension pack.
What type of extension do you want to create? New Extension Pack
Add the currently installed extensions to the extension pack? N
What’s the name of your extension? extension-name
What’s the identifier of your extension? extension-name
What’s the description of your extension? Creating a test pack!
Once you have completed the process, your terminal should look similar to this:
After answering these questions, a project will be created with the following file structure:
├── .vscode
│ └── launch.json
├── .vscodeignore
├── CHANGELOG.md
├── package.json
├── README.md
└── vsc-extension-quickstart.md
If you are interested, read through vsc-extension-quickstart.md to get a quick overview of how extensions are created.
To start customizing your pack, navigate to package.json, where you will add the unique identifiers of the extensions that will be part of your extension pack. You will see a placeholder key/value pair:
"extensionPack": [
"publisher.extensionName"
]
Next, find a few extensions on the marketplace that you think would make a useful pack. Every extension has a unique identifier in the form publisher.extensionName, which can be found on the extensions’ download page in the VS Code marketplace. Look for a section on the right side of the page More Info that will include the unique identifier.
Here’s an example for the Code Time plug-in, with unique identifier softwaredotcom.swdc-vscode.
Add as many extensions as you need to the extensionPack array in package.json.
As an example, Software's productivity pack looks like this:
"extensionPack": [
"softwaredotcom.swdc-vscode",
"cosminalco.pomodoro",
"burkeholland.simple-timer",
"Gruntfuggly.todo-tree",
"alefragnani.Bookmarks",
"sleistner.vscode-fileutils",
"streetsidesoftware.code-spell-checker",
"Shan.code-settings-sync",
"alefragnani.project-manager"
]
Once you’ve added the unique identifiers, you're almost done! Let’s make a few final touches to make your extension pack extra polished for your fans.
Link to a GitHub repository
It is recommended that you add a GitHub repository to your extension pack. Doing so will help you strengthen your GitHub profile and allow other developers who download your pack to easily submit pull requests and file bugs.
First initialize a Git repository with git init in your extension folder and push the project to GitHub. In package.json add a link to the repository:
"repository": {
"type": "git",
"url": "https://github.com/username/extension-repo"
Design an eye-catching icon
You should also add an icon to your extension pack that will help others identify your extension in their editors and in the marketplace.
Icons must be at least 128px by 128px. You can make icons with Figma, a fantastic free tool for design work. Add your image to your project folder and add the following to package.json:
"icon": "icon.png"
Write a descriptive README and changelog
Your README will be displayed in the extension marketplace, so it is a great way to describe what problem your extension pack solves, your inspiration for creating it, and the extensions that are included.
You can include links to each individual extension alongside a screenshot of the extension in action. If you are looking for an example, you can see the READMEs for the productivity pack here and the best dark themes pack here.
Similarly, updating the changelog is also helpful for you and the developers that download your pack. You can show which extensions you have added to the current version. The changelog can help you keep track of how the pack changes, should you decide to add more in the future and push an update.
Tidy up your project
Lastly, you should delete vsc-extension-quickstart.md and any other extraneous files before publishing.
Publishing your extension pack
To publish your extension, you’ll need to install Visual Studio Code Extensions, a command line tool for packaging, publishing, and managing extensions. Open up your terminal again and run:
npm install -g vsce
The fastest way to gain access to the VS Code marketplace is to create both a Microsoft account and a publisher profile on the management page for the VS Code marketplace. Here you can create a publisher profile to add your extensions to the marketplace.
Once you've created a publisher, be sure to go back to your extension pack and edit the package.json file by adding "publisher”: “publisher-name” as a new key/value pair using your newly created publisher name.
"publisher”: “your-publisher-name”
You now have the option to upload your extension, which will then be available in the VS Code marketplace. Navigate to the directory containing your extension pack and simply run vsce package, which will create a VSIX file. The VSIX file contains all of the information needed to install and run your extension pack. Upload the resulting VSIX file on your publisher management page you created earlier.
If you would like to publish using a more advanced workflow, you can publish directly from the command line, but you’ll need to create an Azure DevOps Organization. You can read more about how to do so in the Visual Studio Code documentation.
Once your extension is approved (a process that should only take a few minutes), return to the publisher management page and find your extension in the VS Code marketplace.
