How to Build a Custom VS Code Extension

Step 1: Prerequisites

• Node.js: A JavaScript runtime that lets you run JS outside a browser.
• VS Code: A lightweight but powerful code editor.
• npm: Node’s package manager to install tools.

Install the Yeoman generator and the VS Code extension scaffolding tool globally:

npm install -g yo generator-code

Explanation: yo is Yeoman, a scaffolding tool for modern webapps. generator-code is a Yeoman generator specifically for VS Code extensions. The -g flag installs them globally so you can use the commands anywhere on your machine.

Step 2: Generate Your Extension

Use the generator to scaffold a new project:

yo code

This command launches an interactive CLI that prompts you for the type of extension you want to build (TypeScript/JavaScript), the extension name, description, etc. It then generates the required folder structure and files.

Step 3: Understand the Files

• package.json: Configuration file that declares your extension’s name, version, publisher, activation events, and command definitions.
• src/extension.ts: Entry point where your extension’s logic is implemented.
• README.md: Markdown file for your extension’s documentation.
• vsc-extension-quickstart.md: Quick start info (optional).

Step 4: Modify the Command

Locate this line in src/extension.ts and edit it to customize the message shown when your extension runs:

vscode.window.showInformationMessage('Hello from My Extension!');

Explanation: This uses VS Code’s API to show a popup notification in the editor UI.

Step 5: Run and Debug the Extension

Press F5 in VS Code. This opens a second instance of VS Code called the Extension Development Host.

Use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS), search for your command by name, and run it. You should see the message popup.

Step 6: Package and Publish

To distribute your extension, first install Microsoft’s VS Code Extension Manager (vsce):

npm install -g vsce

Then run this command to package your extension into a .vsix file:

vsce package

Explanation: vsce bundles your extension files so you can publish them or share them manually. To publish to the marketplace, you’ll also need to create a publisher profile and use a Personal Access Token from Azure DevOps.