How to Develop and Publish a VS Code Extension

Source: Dev.to

Hi there! I’m a software engineer from Japan, and today I’d like to share my experience developing a VS Code extension and publishing it to the VS Code Marketplace.

In this article you’ll see:

• The overall flow from setting up a VS Code extension project to publishing it.
• Implementation details of the extension itself (brief overview).
• A short demo of the extension I built – cute characters that roam the side panel, perfect for a quick break.

1. Prerequisites

Make sure the following tools are installed on your machine:

2. Scaffold a New Extension

VS Code provides an official Yeoman generator (generator-code). You can use it in two ways.

Option 1 – Run with npx (no global install)

npx --package yo --package generator-code -- yo code

Option 2 – Install globally

npm install --global yo generator-code
yo code

Running the command opens an interactive prompt. Below is an example of the wizard:

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

✔ What type of extension do you want to create? New Extension (TypeScript)
✔ What's the name of your extension? hello-vscode-world
✔ What's the identifier of your extension? hello-vscode-world
✔ What's the description of your extension? 
✔ Initialize a git repository? Yes
✔ Which bundler to use? unbundled
✔ Which package manager to use? npm
✔ Do you want to open the new folder with Visual Studio Code? Open with `code`

After answering the prompts, a folder named hello-vscode-world is created:

hello-vscode-world/
├── CHANGELOG.md
├── eslint.config.mjs
├── node_modules/
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── extension.ts
│   └── test
├── tsconfig.json
└── vsc-extension-quickstart.md

If you see a structure like the above, the scaffold is complete and you can start coding.

3. Publishing with vsce

vsce (Visual Studio Code Extension) is the official CLI for packaging and publishing extensions.

Install vsce

npm install -g @vscode/vsce

3.1 Create a Personal Access Token (PAT)

1. Sign in to Azure DevOps (create an organization if you don’t have one).
2. Navigate to User Settings → Personal Access Tokens → + New Token.
3. Fill in the fields:

4. Click Create and copy the generated token (you won’t be able to see it again).

3.2 Create a Publisher

1. Go to the VS Code Marketplace Publisher Management page.
2. Sign in with the same Microsoft account used for the PAT.
3. Click Create publisher and fill in:

4. Click Create and verify the publisher account.

3.3 Log in from the Terminal

vsce login "your-publisher-id"

When prompted, paste the PAT you created earlier. A successful login prints:

The Personal Access Token verification succeeded for the publisher "your-publisher-id".

Your publishing setup is now ready.

4. Files to Prepare for Publishing

These files ensure your extension is displayed correctly and is easy to maintain.

5. Package the Extension

Run the following command inside the project folder:

vsce package

If everything is in order, a .vsix file is generated, e.g.:

hello-vscode-world-0.0.1.vsix
├─ [Content_Types].xml
├─ extension.vsixmanifest
└─ extension/
   ├─ changelog.md
   ├─ package.json
   ├─ readme.md
   └─ out/
      ├─ extension.js
      └─ test/
         └─ extension.test.js

You can inspect the .vsix archive (it’s just a zip file) to verify its contents.

6. Publish the Extension

vsce publish

or, to publish a specific version:

vsce publish 1.2.3

After a short upload, your extension will be live on the VS Code Marketplace.

7. Further Reading

• VS Code Extension API – official documentation for building extensions.
• Extension Manifest Reference – details on required and optional fields in package.json.

Demo

Below is a short GIF (or video) showing the cute characters roaming the side panel. (Insert your demo media here.)

Enjoy building your own extensions, and happy coding!

Verify the Package Contents

Run the following command to list the files that will be packaged:

vsce ls --tree

Example output:

hello-vscode-world-0.0.1.vsix
├─ CHANGELOG.md
├─ README.md
├─ package.json
└─ out/
   ├─ extension.js
   └─ test/
      └─ extension.test.js

This step helps you confirm that no unnecessary files are included.

Publishing Your Extension

There are two ways to publish your extension.

1. Upload via the Marketplace UI

1. Go to the VS Code Marketplace publisher management page.
2. Click New Extension → Visual Studio Code.
3. Upload the generated .vsix file.

2. Publish Directly from the CLI

vsce publish

If publishing succeeds, you’ll see output similar to:

DONE  Published XXXXX vX.Y.Z.

You can verify the publishing status on the Marketplace management page. In the Version column, the status will change from verifying to the actual version number once the release is complete.

vsce package vs. vsce publish

Both commands share some common steps:

• Run scripts.vscode:prepublish defined in package.json.
• Determine which files to include based on .vscodeignore.
• Bundle the extension into a .vsix file.

vsce package

• Generates a .vsix file locally.
• Useful for:
  • Publishing from the browser.
  • Sharing the extension file outside the Marketplace.
  • Inspecting the packaged contents.

vsce publish

• Generates a .vsix file and publishes the extension to the VS Code Marketplace immediately.

Closing Thoughts

In this article, I walked through how to create and publish a VS Code extension. The process turned out to be much smoother than I expected—a pleasant surprise!

If you’re interested, feel free to check out and try my extension, Kawaii Terrarium.

Related Topics

• VSCode – Your First Extension
• VSCode – Extension Manifest
• VSCode – Publishing Extensions
• VSCode – Extension API