Creating VS Code extensions

The article covers essential steps on how to create a typical extension for the Visual Studio Code and publish it in the marketplace. It also explains how to automate the publishing of releases on GitHub instead of manual calls of the CLI. Useful links for a quick start are provided.

1. Accounts and profiles

1.1. Microsoft account

A Microsoft account is required to register the publisher profile on the Marketplace and access it through the CLI. If you don't have a Microsoft account, you can create one on the Microsoft website.

1.2. GitHub repository

Create a new GitHub repository. The publishing workflow, secrets, and the code itself will be added in the next steps.

1.3. Azure DevOps organization

To publish the extension on the Marketplace, an Azure DevOps organization must be created according to the guide in the Microsoft documentation. The extension project will be linked to it and organization token is used in the publishing process.

After the organization is created, go to the Personal Access Token and create a new token with the only permission: Marketplace (Manage).

Copy the created token and save it in the GitHub repository -> Settings -> Secrets -> Actions as VSCE_PAT (the name can be different, but this one will be used in the example GitHub workflow below).

1.4. Marketplace profile

The publisher profile is the profile linked through the ID in the extension's metadata and visible as an author of the extension on the Marketplace. To create one go to the management page and follow instructions. The important information from this profile is the Publisher ID.

2. Implementing the extension

The best way to start implementation is to follow the official Getting Started guide.

There are a lot of useful samples on the GitHub which are probably the best source of what to use and how, because the API documentation is quite shallow.

The recommended language for the extensions is TypeScript. However, everything can be written in pure JavaScript as well.

The package.json is not only the project's metadata but also a source of metadata for the published extension itself. Marketplace displays information based exactly on it. The most important here is the field publisher: it must correspond to the Publisher ID created before.

3. Publishing the extension

The manual process of publishing using the CLI is well covered in the official documentation.

To automate the process without the need of vsce CLI, the following workflow on the GitHub can be used:

name: Release
on:
 release:
 types:
 - published

jobs:
 release:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v2
 - uses: actions/setup-node@v1
 with:
 node-version: 14
 registry-url: https://registry.npmjs.org/

 - name: Install dependencies
 run: npm i

 - name: Install vsce
 run: npm i -g vsce

 - name: Publish
 run: vsce publish -p ${{ secrets.VSCE_PAT }}

It must be saved to the file .github/workflows/main.yml.

What it does is that it basically installs the vsce CLI and executes it for you with the secret saved in the repository.

The workflow triggers every time a new release on GitHub is created.