DIY VS Code Extension 2: Publish
Tags: vscode, typescript, javascript
Published: 2020-10-12 03:24:59

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](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) - 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.](https://azure.microsoft.com/en-us/free/devops/)

---

## Create a Publisher

([Microsoft's guide](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) recommends doing this on the command line - this is deprecated.  Do it as below.)

[Head to the Marketplace Management console](https://marketplace.visualstudio.com/manage) 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](https://dev.to/256hz/diy-vs-code-extension-1-development-1km1#the-command-string) 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](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#get-a-personal-access-token) - 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:

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

```json
  "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.

```json
// 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](https://semver.org/) 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.

[![Pineapple party by Scott Webb Photography](https://images.unsplash.com/photo-1496843916299-590492c751f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80)](https://unsplash.com/photos/qWlkCwBnwOE)

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](https://unsplash.com/photos/95YRwf6CNw8)