How to Build a Custom VS Code Extension

Introduction

Visual Studio Code (VS Code) allows developers to enhance their coding experience by building extensions that add functionality to the editor. Whether it’s a snippet library, a linter, or a UI component, building your own extension is a great way to tailor your environment and share useful tools with others. In this tutorial, you’ll build a simple VS Code extension using TypeScript.

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.

Conclusion

You’ve created a functional Visual Studio Code extension using TypeScript. You’ve learned how to scaffold the project, modify and test a basic command, and prepare it for distribution. With this foundation, you can now add more advanced functionality and share your tools with other developers on the marketplace or within your team.