💻 I released my own Visual Studio Code Extension Pack and here is how you can too!
Tags: vscode, javascript, extension, beginners
Published: 2019-08-11 09:39:14

---
title:💻 I released my own Visual Studio Code Extension Pack and here is how you can too!
published: true
description: Learn how to create a Visual Studio Code Extension Pack to make your own life easier
cover_image: https://thepracticaldev.s3.amazonaws.com/i/p4ho2676ynzsrxhc6rgl.png
tags: vscode, javascript, extension, beginners
series: Visual Studio Code
---

# 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](https://marketplace.visualstudio.com/items?itemName=lampewebdev.lampewebdevs-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
```bash
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
```bash
yo code
```
* Now you need to select `New Extension Pack`. Yoeman will now ask questions. You can see them in the example down below.

![](https://thepracticaldev.s3.amazonaws.com/i/qk4nya0lp0k4gnq2jcl3.png)

# 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

![](https://thepracticaldev.s3.amazonaws.com/i/fxyhio9m5uydqzzu3nn7.png)

* When you go to [Visual Studio code Marktplace](https://marketplace.visualstudio.com/) 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.

![](https://thepracticaldev.s3.amazonaws.com/i/rnx6gmuutnkuhwk40tsz.png)

## 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:
```JSON
{
    ...
    "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:
```markdown
# <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:
```markdown
# 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](https://account.microsoft.com/account).

After that, you have to create a Microsoft account you need to navigate to the publishing management page. To get there click [here](https://marketplace.visualstudio.com/manage). 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.

![](https://thepracticaldev.s3.amazonaws.com/i/z9zq2s289p3zzk5j0y2t.png)

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
```JSON
    "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](https://hatchful.shopify.com/). 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. 

```JSON
    "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:
```JSON
  ...
  "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`

```bash
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:

```bash
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](https://marketplace.visualstudio.com/manage/). 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](https://marketplace.visualstudio.com/items?itemName=lampewebdev.lampewebdevs-extension-pack)
You can check out the code here: [lampewebdevs-extension-pack
](https://github.com/lampewebdev/lampewebdevs-extension-pack)

It would help me if you could do the following for me!
Go to [Twitch](https://dev.to/twitch_live_streams/lampewebdev) 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](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)