In the last piece, we walked through developing your first VS Code extension. Congrats! Now let's put it on the Marketplace.
A lot of this is covered in Microsoft's guide - some of which is reproduced here. I made this because I found some steps a little confusing.
Publishing
Get An Azure Devops Account
In order to manage your extension on the Marketplace, you need an account with Azure Devops. You can sign up here.
Create a Publisher
(Microsoft's guide recommends doing this on the command line - this is deprecated. Do it as below.)
Head to the Marketplace Management console to create a publisher. You'll be asked to enter some info, like the publisher name and ID.
The publisher ID is what goes into the command string you made in the last step. Now you can go back and change those, if they are different. (See this section in the last post for details. Again, change it everywhere, or nothing will work.)
Get the CLI tool
Run npm i -g vsce (if you're using NPM). This installs vsce, the command-line tool we will use to publish the extension.
Get a PAT
You'll need a Personal Access Token (PAT). Head to your DevOps dashboard, which will be here:
https://dev.azure.com/your-account-name/
Follow the instructions in the official docs - there are nice screenshots and a thorough walkthrough.
Remember to extend the life of the token and add the Manage Marketplace scope.
Copy the token when you see it - if you go back without doing so, you'll lose it and have to start this step over.
Log In As Your New Publisher
Run the following on the command line:
vsce login <publisherId>
Use the publisher ID you created earlier. The tool will ask for your PAT, which you can paste in here.
Fill Out Your package.json
Open up your package.json. Fill out the following fields.
name: the URL slug in the marketplace (format accordingly).
displayName: the marketplace title of the extension (what you want people to search for).
description: the text that will appear underneath your displayName in a search. (The shorter the better.)
publisher: the publisher ID you created above.
repository: the URL of your repo. It's formatted like this:
"repository": {
"type" : "git",
"url" : "https://github.com/256hz/SwapTernary"
}
To give your command a default hotkey, you can add contributes.keybindings. My contributes section is below for reference.
// package.json
...
"contributes": {
"commands": [
{
"command": "256hz.swapTernary",
"title": "Swap Ternary"
}
],
"keybindings": [
{
"command": "256hz.swapTernary",
"key": "shift+alt+s"
}
]
},
Make A Nice Readme
Edit README.md in the root of your project - this is what will be shown when you browse the extension in the marketplace. They provide a good template. It's always nice to have some demo gifs here, usage instructions, and any known issues.
You can also add a LICENSE in the root to contain your legal license, and a CHANGELOG.md for changes.
Publish!
From the command line, at the root of your extension, run
vsce publish 0.1.0
You can use whatever version you like - the script will automatically update your package.json with the right number. It does have to be formatted according to the semVer rules.
From here on out, you can forget about the version number if you like. You can run vsce publish [major/minor/patch] and it will automatically bump it up for you.
You should get an email shortly (to the address you added when you created your publisher above). It should say that the publish was successful and you can now find your extension on the marketplace.
Give it a shot - open up the Marketplace from VS Code (shift + command + x). Search for the title you used in your package.json. You (and everybody else) can now use your extension! Time for a PINEAPPLE PARTY.
Congratulations, and welcome to the world of extension development. Have fun!
If you have any questions or get stuck please feel free to ask below.
Cover photo: Code by Clement H on Unsplash
Top comments (0)