How to Create a Custom VS Code Extension

Creating a custom extension for Visual Studio Code allows you to tailor your development environment, automate repetitive tasks, or share new utilities with the developer community. This article provides a straightforward, step-by-step guide on how to build a custom VS Code extension, covering environment setup, project initialization, key project files, debugging, and publishing your final product.

Step 1: Install the Prerequisites

Before building a VS Code extension, you need to have the following tools installed on your computer:

Node.js: Ensure Node.js and npm (Node Package Manager) are installed.
Git: Required for version control and project setup.
Visual Studio Code: The editor itself is needed for writing and testing your code.

Step 2: Install the Extension Generator

Microsoft provides an official scaffolding tool called Yeoman to quickly set up a VS Code extension project.

Open your terminal or command prompt and run the following command to install Yeoman and the VS Code extension generator globally:

npm install -g yo generator-code

Step 3: Scaffold Your Extension Project

Navigate to the directory where you want to save your project, then run the generator using this command:

yo code

The generator will prompt you with several questions: 1. What type of extension do you want to create? Select “New Extension (TypeScript)” or “New Extension (JavaScript)”. TypeScript is recommended for better autocompletion and type safety. 2. What’s the name of your extension? Enter a display name. 3. What’s the identifier of your extension? This will be used in the URL and configuration (press Enter to accept the default). 4. What’s the description of your extension? Enter a brief description. 5. Initialize a git repository? Select Yes. 6. Which package manager to use? Select npm or yarn.

Once completed, a new directory with your project files will be created. Open this folder in VS Code:

code <your-extension-folder-name>

Step 4: Understand the Core Files

Every VS Code extension relies on two main files to function:

1. `package.json` (The Manifest File)

This file contains the configuration for your extension. Key fields include: * activationEvents: Specifies when your extension should be activated (e.g., when a specific command is run, or when a specific file type is opened). * contributes: Defines the contribution points. This is where you declare your extension’s commands, menus, shortcuts, and UI elements.

2. `extension.ts` or `extension.js` (The Logic File)

Located inside the src folder, this file contains the actual code for your extension. It contains two vital lifecycle functions: * activate: Runs when your extension is first triggered. * deactivate: Runs when the extension is disabled or VS Code is closed.

Inside the activate function, you will register commands that perform actions when selected by the user.

Step 5: Test and Debug Your Extension

VS Code makes testing your extension seamless:

Press F5 (or go to Run and Debug in the sidebar and click Start Debugging).
A new VS Code window will open. This is the Extension Development Host. This window has your custom extension pre-loaded.
Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) inside the new window to open the Command Palette.
Type the name of your command (the default template command is “Hello World”) and press Enter.
You should see an information message popup at the bottom right of the window.

You can set breakpoints in your main VS Code window to debug your code in real-time.

Step 6: Publish Your Extension

To share your extension with others, you can package it into a .vsix file or publish it directly to the VS Code Marketplace.

Packaging Locally

Install the VS Code Extension Manager (vsce) tool:

npm install -g @vscode/vsce

Run the packaging command inside your project directory to generate a .vsix file:

vsce package

This file can be shared directly with other users, who can install it in VS Code via the “Install from VSIX…” option in the Extensions view.

Publishing to the Marketplace

To publish your extension to the public Marketplace, you will need a Microsoft account and a Personal Access Token (PAT) from Azure DevOps. Once you have configured your publisher profile, run the following command to make your extension available to millions of developers worldwide:

vsce publish