DEV Community

Kazuki
Kazuki

Posted on

How to Develop and Publish a VS Code Extension

#vscode #typescript #productivity #beginners

How to Develop and Publish a VS Code Extension

Hi there!
This is my first post on DEV Community. Nice to meet you!

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.

What this article covers

  • The overall flow from setting up a VS Code extension project to publishing it

What this article does NOT cover

  • Implementation details of the extension itself

Introduction

Recently, there has been a lot of excitement around IDEs—for example, Google released Google Antigravity.
Still, I believe many developers continue to rely on Visual Studio Code (VS Code) in their daily work.

I personally use VS Code as my main editor, and countless extensions have helped me stay productive while coding.

At some point, a simple question came to my mind:

"How do you actually create a VS Code extension?"

That curiosity led me to try building one myself—and eventually, I went all the way to publishing it on the VS Code Marketplace.

In this article, I’ll walk through the overall process of developing and publishing a VS Code extension, and briefly introduce the extension I created.

What I created

Let me first introduce what I built.

The concept is very simple.
In fact, this extension basically does nothing.

Main features

  • It doesn’t add any productivity features
  • Cute characters appear and casually roam around the side panel
  • Just open it when you’re tired and want to relax for a moment

Below is a short demo of how it looks in action.
When you activate the extension, a panel opens, and small animal characters keep walking around on the screen like this.
Demo App

Setup

Prerequisites

Before getting started, make sure you have the following installed:

  • Node.js
  • git
  • VS Code (of course!)
  • Microsoft account (required for Azure DevOps / Marketplace publishing)

Development Preparation

1. Generate a VS Code extension template

VS Code provides an official project generator based on Yeoman using the VS Code Extension generator.

You can use it to quickly scaffold a VS Code extension project.

You have two options.

Option 1: Run with npx

npx --package yo --package generator-code -- yo code
Enter fullscreen mode Exit fullscreen mode

Option 2: Install globally

npm install --global yo generator-code
yo code
Enter fullscreen mode Exit fullscreen mode
2. Answer the interactive prompts

After running the command, you will see an interactive prompt like the following.
Answer each question to configure your extension.

     _-----_     ╭──────────────────────────╮
    |       |    │   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`
Enter fullscreen mode Exit fullscreen mode

Once you finish answering these questions, the project template will be generated automatically.

3. Check the generated project structure

After the generator completes, a directory with your extension name will be created.
The structure should look like this:

./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
Enter fullscreen mode Exit fullscreen mode

If your directory looks like the above, the setup is complete and you’re ready to start developing your extension.

Preparation for Publishing

1. Install vsce

To publish VS Code extension, you need to install vsce via npm.
vsce is an official CLI tool that helps you package and publish VS Code extensions to the Marketplace.

npm install -g @vscode/vsce
Enter fullscreen mode Exit fullscreen mode
2. Create a Personal Access Token (PAT) on Azure DevOps

Publishing an extension requires a Personal Access Token (PAT) from Azure DevOps.

  1. Create an Organization on Azure DevOps, then navigate to Personal Access Token. PAT Creation
  2. Click "+ New Token"
  3. Fill in the following fields:
    • Name: Any name you like
    • Organization: The default value is usually fine
    • Expiration: Token expiration date
    • Scopes:
      • Select Custom defined
      • Click Show all scopes
      • Enable Marketplace -> Manage
    • Click Create Fill in requires
  4. Copy the generated token (you won’t be able to see it again)
3. Create a publisher

You also need to create a publisher to publish extensions to the VS Code Marketplace.

  1. Go to the VS Code Marketplace publisher management page
  2. Sign in using the same Microsoft account that you used to create the PAT.
  3. Click Create publisher
  4. Fill in the required information:
    • ID: A unique identifier used in the extension URL. ⚠️This cannot be changed later
    • Name: The publisher name displayed in the Marketplace
  5. Click Create
  6. Verify the Publisher Account Finally, log in from your local terminal using vsce. Run the following command and enter your PAT when prompted: 
vsce login "publisher-ID"
Enter fullscreen mode Exit fullscreen mode

If the setup is successful, you should see the following message:

The Personal Access Token verification succeeded for the publisher "publisher-ID".
Enter fullscreen mode Exit fullscreen mode

Once you see this message, your publishing setup is complete.

Implementation

I won't cover implementation details in this article.

If you want to learn more about how to build VS Code extensions, please refer to the official documentation below:

Files to Prepare for Publishing

Below is a list of files and settings you should prepare before publishing your extension to the VS Code Marketplace.

Item Description
package.json The fields name, version, publisher, and engines are required.
Adding license, repository, and bugs is strongly recommended.
See details: Extension Manifest Reference
README.md Displayed directly on the VS Code Marketplace page
icon Shown as the extension icon in the Marketplace
.vscodeignore Used to exclude unnecessary files from the Marketplace package
CHANGELOG.md Displayed automatically on the Marketplace

These items are essential to ensure your extension is properly displayed and managed in the Marketplace.

Publishing

1. Package the extension

Run the following command in your project directory:

vsce package
Enter fullscreen mode Exit fullscreen mode

If there are no issues, a .vsix file will be generated.
You will also see the list of files included in the package:

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
Enter fullscreen mode Exit fullscreen mode

2. Check the package contents (optional but recommended)

You can inspect the contents of the .vsix file with the following command:

vsce ls --tree
Enter fullscreen mode Exit fullscreen mode 
hello-vscode-world-0.0.1.vsix
├─ CHANGELOG.md
├─ README.md
├─ package.json
└─ out/
   ├─ extension.js
   └─ test/
      └─ extension.test.js
Enter fullscreen mode Exit fullscreen mode

This step is useful to confirm that unnecessary files are not included.

3. Publish the extension

There are two ways to publish your extension.

Option 1: Publish from the browser
  1. Go to the VS Code Marketplace publisher management page
  2. Click: New Extension -> Visual Studio Code
  3. Upload the generated .vsix file
Option 2: Publish from the terminal 
vsce publish
Enter fullscreen mode Exit fullscreen mode

If publishing succeeds, you will see output like this:

DONE  Published XXXXX vX.Y.Z.
Enter fullscreen mode Exit fullscreen mode

4. Check the publishing status

You can check 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.

5. Difference between vsce package and vsce publish

Both commands perform 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

However, there is an important difference:

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
  • Publishes the extension to the VS Code Marketplace immediately

Conclusion

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, which was a pleasant surprise.
Going forward, I’d like to keep improving this extension and also try building more useful (and fun) tools for VS Code.

If you’re interested, feel free to check out and try my extension, Kawaii Terrarium.
I hope it brings a small moment of relaxation to your coding time!

Reference

Top comments (0)