Wouldn't it be great to have a set of VSCode extensions you can't live without with one simple install? By the end of this post, you will be able to create your own VSCode extension pack, so you can have it shared with your team or the dev community via VSCode's marketplace.
You can install my extension pack here if you want to have super-powers in VSCode...🦸
VSCode has an awesome CLI you can use to quickly generate your extension pack.
Step1- install packages.
First let's install yeoman, a scaffolding tool for webapps, and yeoman's generator plugin for VSCode.
npm install -g yo generator-code
Step2- Create extension pack
Next, let's run the yo command in the directory/folder we want to generate our VSCode extension pack.
yo code
This will ask a series of questions to customize the new project. In our case a "What type of VSCode extension are we creating?". Select "New Extension Pack".
Most likely you already have the extensions we want to package installed locally. In our scenario, we hit "Y".
Give our pack a name and leave the identifier as is.
Enter a description for our package. If you want to keep a repo for the extension hit "yes", but since it's not required we can enter "no" as show in the screenshot below.
This should have generated our extension pack for us. Now we can open this directory from up our beloved VSCode editor to add our flavor.
Step-3 Make it your own
Now that we have our code generated and folder structure in place, in the root directory of the extension pack - open the package.json file which is also called "extension manifest". In it we can make changes to the extensions. You can find out more from the docs extension manifest .
In the package.json file let's add a publisher name and icon path to our extension pack
{
"name": "myextensionpack",
"displayName": "myExtensionPack",
"description": "My extension pack",
"version": "0.0.1",
"publisher": "DeejayDev",
"icon": "my-icon.png",
...
`
The publisher name and icon would be displayed in VSCode editor's extension screen and VSCode's marketplace.
NOTE: The icon must be at least 128x128.
We can even customize our VSCode's marketplace from our extensions, so let's do that. Still inside our package.json let us add a theme to our extension page.
`
{
...
"galleryBanner": {
"color": "#399e64",
"theme": "dark"
}
}
`
Before we can package our extension, we need to edit the README.md file and save the changes. This is where we provide more details about our extensions.
Finally, we must create the installable file we want to share via the marketplace or locally. To do that we need to install The Visual Studio Code Extension Manager (vsce).
npm i -g vsce
In the root directory of our extension we need to run the following command:
vsce package
Since we didn't create a repo for the extension we can say "Yes" when promted with the warning.
And that it!
You can install the package locally or if you'll like to publish it to the VSCode marketplace, you need to follow these steps to get setup. But we're just going to go to: VSCode extensions marketplace and click on "publish extensions", sign-in if not.
Create a new publisher, then click on "+ New Extension" and select "Virtual Studio Code". Then drag n drop your the (VSIX) file we packaged with vsce package . The new upload may take a while to go live.
Conclusion
Combining the right sets of extensions can be very helpful to beginners just learning to code and experienced developers. For me, being able to code without worrying about typos, plus ai-powered code suggestion, etc... Makes me more productive.
So I came up with the Ultimate Web Development Pack for productive web developers. If you'll like to add your VSCode extension to this pack, you can go to the contribution page.
Top comments (1)
Just uploaded my extension pack here. But how do I update the package in case if I want to include new extensions. Do I have to rerun vsce package again and upload it again to marketplace?