Build and Publish Your Own VS Code Extension: From Scaffold to Marketplace

Background

Frequent article publishing at a company required a fixed format, involving manual regex replacements and header insertion, which was time‑consuming and error‑prone. To automate this, the edit-article VS Code plugin was created.

Goal

The aim is to develop a custom VS Code extension, publish it to the marketplace, and demonstrate its functionality without using the edit-article plugin as a case study.

Scaffold Creation

Installation and Usage

Install Yeoman and the VS Code generator to quickly scaffold a plugin project:

npm install -g yo

npm install -g generator-code

yo code myextension

The last command creates a folder named myextension containing the scaffold.

VS Code Plugin Scaffold Overview

The scaffold offers seven template types: JavaScript or TypeScript extensions, theme extensions, language support, code snippets, keybinding extensions, and multi‑extension packs. The tutorial proceeds with the basic JavaScript extension template.

Implement Business Logic – Reverse String

The extension provides a command that reverses the selected text and binds it to a shortcut.

Register Command in package.json

"commands": [
  {
    "command": "edit-article.reserve",
    "title": "Hello reserve"
  }
]

Implement Command in extension.js

const vscode = require("vscode");
function activate(context) {
  let reserve = vscode.commands.registerCommand(
    "edit-article.reserve",
    function () {
      let editor = vscode.window.activeTextEditor;
      if (!editor) { return; }
      let document = editor.document;
      let selection = editor.selection;
      let text = document.getText(selection);
      let result = text.split("").reverse().join("");
      editor.edit(editBuilder => {
        editBuilder.replace(selection, result);
      });
    }
  );
  context.subscriptions.push(reserve);
}
function deactivate() {}
module.exports = { activate, deactivate };

Activation is configured via activationEvents, e.g., "onLanguage:javascript", so the extension loads when a JavaScript file is opened.

Bind Shortcut Key

"keybindings": [
  {
    "key": "ctrl+shift+r",
    "command": "edit-article.reserve"
  }
]

Publish Plugin

To publish, create a Microsoft account, generate a Personal Access Token (PAT) in Azure DevOps, and set up a publisher account in the VS Code Marketplace.

Configure essential fields in package.json such as publisher, activationEvents, and repository. Install the publishing tool: npm install -g vsce Login and publish:

vsce login [publisherName]
# enter the PAT
vsce publish patch

After a few minutes the extension appears in the VS Code marketplace.

Conclusion

Following this guide, you should be able to create, test, and publish a VS Code extension that reverses selected text, and you can adapt the process for other custom functionalities.