How to Build Your First VS Code Extension — Commands, Status Bar & Output Channel

What is a VS Code Extension?

VS Code is built to be extended. Every feature you see — syntax highlighting, IntelliSense, Git integration — is an extension. The VS Code Extension API lets you add your own commands, UI elements, and functionality to the editor.

Setting Up with Yeoman

VS Code has an official generator to scaffold extension projects:

npm install -g yo generator-code
yo code

Choose New Extension (TypeScript) and fill in your project details. This creates a complete project with everything you need.

The package.json — Extension Manifest

The package.json file is where you declare what your extension contributes to VS Code:

{
  "contributes": {
    "commands": [{
      "command": "myExtension.helloWorld",
      "title": "Hello World"
    }]
  }
}

Registering a Command

In your extension.ts, register the command and connect it to a function:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // Register the command
  const command = vscode.commands.registerCommand(
    'myExtension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello from my extension!');
    }
  );

  context.subscriptions.push(command);
}

Now press F5 to open the Extension Development Host and try Ctrl+Shift+P → "Hello World".

Adding a Status Bar Item

const statusBarItem = vscode.window.createStatusBarItem(
  vscode.StatusBarAlignment.Right,
  100 // priority
);
statusBarItem.text    = '$(check) My Extension';
statusBarItem.tooltip = 'Click to run command';
statusBarItem.command = 'myExtension.helloWorld';
statusBarItem.show();

Packaging with vsce

npm install -g @vscode/vsce
vsce package
# Creates: my-extension-1.0.0.vsix

This is a preview. The full ebook covers the Output Channel API, reading workspace files, adding configuration settings, and publishing to the VS Code Marketplace.