🌎 Publishing Your Extensions to Visual Studio Marketplace

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). With its robust set of features and extensive library of extensions, VSCode has become the go-to code editor for many developers.

💡 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.

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. 🙌 😉

✨ 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/ 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.

🪙 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.

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

🚨 WARNING: Make sure you SAVE A COPY 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! 👀 🔐

📝 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.

📦 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.

{
  "publisher": "<Your Publisher ID>",
  "repository": {
    "type": "git",
    "url": "<Your repository URL>"
  },
  "keywords": ["<Keyword 1>", "<Keyword 2>"]
}

💡 NOTE: Make sure your LICENSE file is existing on your ROOT repository as VSCode will check this during packaging / publishing.

🚀 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:

npm install -g vsce

• Login to your publisher's account using vsce:

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:

vsce package

💡 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:

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.

💡 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!

🚧 Updating your Extension

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

vsce publish <patch|minor|major>

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

💡 TIP: Run vsce package every time you publish a new update 😉

🎉 Congratulations!

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