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:

<code>npm install -g yo</code>

<code>npm install -g generator-code</code>

<code>yo code myextension</code>

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

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

Implement Command in extension.js

<code>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 };
</code>

Activation is configured via

activationEvents

, e.g.,

"onLanguage:javascript"

, so the extension loads when a JavaScript file is opened.

Bind Shortcut Key

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

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:

<code>npm install -g vsce</code>

Login and publish:

<code>vsce login [publisherName]
# enter the PAT
vsce publish patch
</code>

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.