🌎 Publishing Your Extensions to Visual Studio Marketplace
Tags: vscode, marketplace, extensions, webdev
Published: 2023-02-19 01:55:50

In today's world, technology is evolving at a fast pace, and developers are constantly looking for ways to improve their productivity and streamline their workflow. One of the tools that has gained immense popularity in recent years is [Visual Studio Code (VSCode)](https://code.visualstudio.com/). With its robust set of features and extensive library of extensions, VSCode has become the go-to code editor for many developers.

> :bulb: But did you know that you can also create your own extensions for VSCode and share it with the community? If you missed my last post about _"Creating Your First VSCode Extension Theme"_, you can check that out **[here](https://dev.to/shiftescape/creating-your-first-vscode-extension-9d4)**.

In this article, we will explore the process of publishing your own extensions to the VSCode Marketplace. Whether you're looking to solve a specific problem, add new features, or just share your work with others, publishing extensions to the marketplace is an excellent way to contribute to the developer community and improve your own development experience. 🙌 😉

--------------------------------------------------------------

<img src="https://media.giphy.com/media/xjEmbSLychDd6JQFo0/giphy.gif" alt="Seems like a winning combo to me" />

--------------------------------------------------------------

## :sparkles: Setup You Microsoft Azure DevOps Account

As you've probably know, VSCode is created and maintained by Microsoft. With that, we now have a single login for Azure Cloud Services and VSCode Extensions.

Head on to [http://dev.azure.com/](http://dev.azure.com/) website and create an account. You can opt to sign in with your Github account or just register with your personal email.

> Once you've successfully registered, you will be redirected to your Azure DevOps Dashboard page under your created Organization name.

![Azure DevOps Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqvjd9fayb029pfbvhg2.png)

--------------------------------------------------------------
## 🪙 Create your Personal Access Token (PAT)

This will be used as your authentication in publishing your extensions in the marketplace.

Click on the **User Profile** settings icon beside your avatar and choose **Personal access tokens**.

![Navigating to Personal Access Tokens in Azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hffrklhdybtjjd354elw.png)

--------------------------------------------------------------

1. Click **New Token** to create your Token.
2. Add your Token Name
3. Under **Organization**, select **All accessible organizations**
4. For **Expiration**, select **Custom defined** which will default to 1 year from now as the maximum expiration time
5. Under **Scopes**, make sure **Custom defined** is selected.
6. At the bottom, click **Show all scopes** and scroll down to Marketplace section
7. Select the **Manage** option
8. And lastly, click the blue **Create** button

![Create Personal Access Token Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9fhnordknfsorr6gwj0.png)

> :rotating_light: **WARNING:** Make sure you <u>**SAVE A COPY**</u> of your newly created access token (PAT) as Azure will not store it and you will not be able to see it again. And most importantly, **don't share it to anyone**! 👀 🔐

<img src="https://media.giphy.com/media/l0KQbLPpeHjKPnv6o/giphy.gif" alt="Are you still with me?" />

--------------------------------------------------------------
## :pencil: Create a Publisher

This will be your **Publisher Name** attached to your extension when it is available to the marketplace.

Navigate to: https://marketplace.visualstudio.com/manage and you should see a **Create Publisher** page. The only required fields here are the **Name** and **ID** of the publisher. The rest is optional.

If all goes well, you will be redirected to **Manage Publishers & Extensions** page. Keep that page open as we will be returning to it later.

--------------------------------------------------------------
## :package: Prepare Your Extension

Here are some steps to ensure your extension's smooth transition to marketplace.

- Open your extension's folder in VSCode and go to your **`package.json`** file and make sure these properties are being set.

```json
{
  "publisher": "<Your Publisher ID>",
  "repository": {
    "type": "git",
    "url": "<Your repository URL>"
  },
  "keywords": ["<Keyword 1>", "<Keyword 2>"]
}
```
> :bulb: NOTE: Make sure your **`LICENSE`** file is existing on your ROOT repository as VSCode will check this during packaging / publishing.

--------------------------------------------------------------

## :rocket: Package and Publish it!

Once your extension is ready to go, you can package and publish it by using the terminal only.

- Open the integrated terminal in VSCode and install their extension plugin by running:

```shell
npm install -g vsce
```
- Login to your publisher's account using `vsce`:

```shell
vsce login <You Publisher ID>
```
> 🔐 You will then be prompted to input your `Personal Access Token (PAT)`. Copy and paste it there and tap `Enter` key.

- Next, you can build a package of your theme by running:
```shell
vsce package
```
> :bulb: The plugin will automatically create a `.vsix` file in your extension's root directory indicating the package version on the filename. Make sure also **NOT** to check in this file to your repository.

- To publish it to marketplace, run:
```shell
vsce publish
```

- To verify the status of your deployment, navigate to your **Manage Publishers & Extensions** page and there you can see your extension's in **"Verifying"** status.

> :bulb: This may take a while and as soon as this process is complete, you can now see your extension's version and a green check mark before it!

--------------------------------------------------------------

## :construction: Updating your Extension

For version updates, make sure you have a clean GIT working directory before publishing a **`PATCH`**, **`MINOR`** and **`MAJOR`** update.

```shell
vsce publish <patch|minor|major>
```

> The plugin will automatically handle the semantic versioning so you won't have to manually do it by yourself.

> :bulb: **TIP:** Run `vsce package` every time you publish a new update 😉

--------------------------------------------------------------

## :tada: Congratulations!

And there you have it! Your extension is now available to the community for installation! Share it to your social media and friends! ❤️

<img src="https://media.giphy.com/media/Qs0QEnugOy0xIsFkpD/giphy.gif" alt="Ricky and Morty - Good Job!" />