Introduction

Visual Studio Code out of the box comes with many features and already looks fantastic. Still, you want to make it feel like home, like your home🏡.

For that, you can Install extensions, Themes, and Icons. People forget what extensions they have installed or have installed way too many extensions and then finde it painful to uninstall them.

Maybe your hole team works with Visual Studio Code, and you want to share your extensions with your team. It can also help in the onboarding process of new coworkers.

You are using the Remove Development extension, and you want to install many extensions on your remote setup.

As you so, extension packs can be helpful in many ways and make your life easier and more productive.

My extension pack

For all the reasons above, I published my extension pack. LampeWebDev's extension pack
If you want to have the same Theme, Icons, and extensions, I use most of the time, install that extension pack! Change the colour and icon theme, and you are good to go!

How you can create your extension pack

Requirments

You need to have nodejs with npm, git and Visual Studio Code installed on your machine. These installations highly depend on your operating system.

Generating an extension pack template

The Visual Studio Code team provides great tooling around Visual Studio Code extension development. You should use it when you want to develop extensions for visual studio code.

You need to install two npm packages. The first one is yoeman (the npm package is called yo), and the second one is the generator-code package. Yoeman is an npm package that helps you to kickstart new projects. Yoeman needs so-called generators. These generators are like new kickstart options for yoeman that you can then call.

• Install the needed packages

npm install -g yo generator-code

Depending on your setup you maybe need to run this command with sudo or admin rights.

• No you can call tell yoeman to kickstart a visual studio code extension

yo code

• Now you need to select New Extension Pack. Yoeman will now ask questions. You can see them in the example down below.

Adding extensions to your pack

Find out the unique extension name

There are two ways to do that. One is in your browser, and the other way is in Visual Studio codes extension tab. The unique package name consists of the name and the package name separated by a dot. <AuthorName>.<PackageName>

• When you open the page of the extension in Visual Studio code you will see the unique package name to the right of the package name

• When you go to Visual Studio code Marktplace and search for the extension you are looking for and go to the details page of the extension you can see the unique name in the address bar.

Adding the extension to the package.json file

Now that you know and copy the unique name of your extension you need to open the package.json file in the generate folder of your extension pack by yoeman. In the package.json file, you need to search for the extensionPack key. This key has to be an array of strings with the unique extension names.

It should look like this:

{
    ...
    "extensionPack": [
        "robbowen.synthwave-vscode",
        "laurenttreguier.vscode-simple-icons",
        "visualstudioexptteam.vscodeintellicode",
        ...
    ],
    ...
}

Add all the extension you wish to have in your extension pack.

Running/Testing your extension pack

We need to check if our extension really will be installed. For this, we need to have a filled and saved package.json file. You can either hit F5 or hit CTRL+SHIFT+P and type Debug: start debugging.

You will see a new visual studio code window, and when you navigate to the extension tab, you should see your extension pack and the extension referenced in your pack. Check if everything is okay.

This step did not work for me while being in a Remote Development session like WSL or SSh.

Edit the README.md and CHANGELOG.md

It is good practice to write a readme file. What I like to do here is to create a list with the used extension and add links to them.

I created a small template:

# <Name of the Extension>

## Included Extensions

### Theme and Icons

 - [Name of the Extension](LINK)
 - ...

### Generic

 - [Name of the Extension](LINK)
 - ...

### Framework Specific

 - [Name of the Extension](LINK)
 - ...

A changelog is not just useful to keep other people updated on what has changed but also for you to remember what you have changed.

Here is my template:

# Change Log

All notable changes to the "<PACKAGE NAME>" extension pack will be documented in this file.

## [X.Y.Z]

- Changed something

## [0.0.1]

- Initial release

Don't forget to save both files.

Publishing your extension

Now that we know that your extension is working we need to publish it!

Needed Accounts

You will need a Microsoft account for this. You can create one here.

After that, you have to create a Microsoft account you need to navigate to the publishing management page. To get there click here. There you need to create a new publisher if it's not created for you. You can find your publisher name in two places again.

Open the package.json file in your extension pack folder and add this publisher name to it under the key publisher. For me, it looks like this

    "publisher": "lampewebdev",

Tidy up your package.json file

Change the version to 1.0.0 if you want to.

An Icon rounds everything up, and you don't need to be a designer to create one. There are many Logo generators online. What I like is to use Hatchful. Create your logo and put a png or jpeg file into your extension pack folder. You need to add this to the package.json file too.

    "icon": "icon.png",

It is good practice to publish your package online in a repository. You can do that on Github, GitLab or BitBucket or your private git repo as long as it is accessible through a git URL.

Copy your git URL and open the package.json. There we need to add the following entry:

  ...
  "repository": {
        "type": "git",
        "url": "<GIT_URL>"
    },
  ...

Creating your vsix file

vsix is the file extension that specifies that this file is a visual studio code extension and we need now to create that extension.

We need to instal another npm package for that. It is called vsce

npm install -g vsce

You will maybe need sudo or admin rights to install vsce globally.

Now navigate in a terminal to your extension pack folder and run the following command:

vsce package

The command will create a new file.

Uploading your extension to the marketplace

Now we need to upload the file to the marketplace. Click here. Click on + New Extension, and a dropdown will appear. Click on Visual Studio Code and will open a modal window, and you need to drag and drop your vsix file into that modal and upload it.

Now the marketplace will do the rest! After a few minutes, you will see a green checkmark near the version. This means that your extension pack is now successfully published to the world!

You can click on the Extension name, and this will bring you to the public package of your extension!

That's it! You have now published your extension pack!

Conclusion

Having an extension pack for your team can be a beneficial thing, and you should think about creating one for you and your team.

Also, if you often change your workstation or work with remote environments, this can get you up and running in no time.

You can check out my extension: LampeWebDev's extension pack
You can check out the code here: lampewebdevs-extension-pack

It would help me if you could do the following for me!
Go to Twitch and leave a follow for me! If just a few people would do that, then this would mean the world to me! ❤❤❤😊

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube