DEV Community

Cover image for Want to see your extension shine in the VS Code Marketplace? Let's go!
Bruno Ciccarino λ
Bruno Ciccarino λ

Posted on

Want to see your extension shine in the VS Code Marketplace? Let's go!

You've poured your heart and soul into crafting an awesome VS Code extension, and now it's time to share it with the world! Publishing to the VS Code Marketplace is easier than you might think. This guide will walk you through the process step-by-step, with helpful tips and tricks to avoid common pitfalls.

Before We Begin:

VS Code Up and Running: Make sure you have VS Code installed and updated on your machine.

Extension Ready to Shine: Your extension should be fully functional and thoroughly tested. Squash those bugs and polish it to perfection!

Microsoft Account: You'll need a Microsoft account to publish on the Marketplace. If you don't have one, sign up for free on the Microsoft website.

Let's Get Publishing!

  • Setting the Stage:

    • Open the VS Code terminal (Ctrl + `).
    • Navigate to your extension's folder.
    • Run the command npm install -g vsce. This installs the VS Code Extension CLI, a powerful tool for managing your extensions.
  • Packaging Your Masterpiece:

    • Execute the command vsce package. This generates a .vsix file containing your entire extension, ready for publication.
  • Azure DevOps: Your Extension's Home:

    • Head over to the Azure DevOps website and create a free account.
    • Click "Start free".
    • Follow the instructions to set up your account.
  • Creating a Project:

    • In Azure DevOps, click "New project".
    • Choose a name for your project (using your extension's name is a good idea).
    • Select "Git" as your code repository.
    • Click "Create".

Connecting Your Extension:

  • Go back to your extension's folder in the terminal.

    • Run the commands:
  • git init

  • git add .

  • git commit -m "Initial commit"

  • Connect your local repository to Azure DevOps: git remote add origin

  • Push your code to the remote repository: git push -u origin master

    • Preparing for the Marketplace:
  • Visit the VS Code Marketplace (https://marketplace.visualstudio.com/).

  • Click "Sell your extensions".

  • Log in with your Microsoft account.

  • Fill in the details about your extension: name, description, screenshots, etc.

    • Publishing Time!
  • 1) In the VS Code Marketplace, click "New Extension".

  • 2) Select the .vsix file you created earlier.

  • 3) Review your extension's information and click "Publish".

Congratulations! Your extension is live!

Now, anyone can find and install your extension from the VS Code Marketplace.

Troubleshooting Common Issues:

"Publisher" Not Found:

Make sure you've declared the "publisher" field in your package.json file. This should be your unique identifier on the Marketplace.

"publisher": "your-username-or-company-name"

Version Number Mismatch:

Double-check that the version number in your package.json file matches the version you're trying to publish.

Marketplace Errors:

Read the error messages carefully! They often provide clues about what went wrong.

Top comments (0)