I have previously written about creating your own VS Code theme extension (in 30 minutes or less), but did you know that building your own extension pack is also incredibly easy?
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 the pack, uninstalling the pack will also automatically remove each extension.
I’ve built a few myself that you might find valuable:
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
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.
To install both Yeoman and the Visual Studio Code Extension Generator, run:
npm install -g yo generator-code
If you would like to read more about these tools, you can refer to the Setting Up Your Environment section of my previous article below. This will probably take you ~5 minutes.
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 Code Time, with unique identifier softwaredotcom.swdc-vscode.
Add as many extensions as you need to the extensionPack array in package.json.
As an example, my 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 are almost done! Let’s make a few final touches to make your extension pack extra nice for your fans.
Link to a GitHub repository
I recommend adding 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:
"repository": {
"type": "git",
"url": "https://github.com/username/extension-repo"
Design an eye-catching icon
I also recommend adding 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 128x128 px. I make all my icons with Figma, a fantastic free tool for design work. You should 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.
I also like to 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 my productivity pack here and my 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, I would recommend deleting 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.
You are done!
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 article I have previously mentioned (about halfway through the section Publishing your theme extension to the VS Code marketplace).
Once your extension is approved (a process that should only take a few minutes), be sure to share the news with your friends!
Check out SRC - a newsletter just for devs.
Top comments (0)