🔌 Lesson 39 of 40 Extension Dev Expert

Writing Your First VS Code Extension

VS Code is built on extensions — and you can write one too. This lesson scaffolds a new extension, explores the Extension API, and publishes to the marketplace.

98% complete

1Scaffolding an Extension

Terminal

npm install -g @vscode/generator-code yo
yo code
# Choose: New Extension (TypeScript)
# Fill in: name, description, publisher

This creates a ready-to-run extension with a Hello World command. Press F5 to launch an Extension Development Host — a second VS Code window with your extension loaded.

2The Extension API

The vscode npm module exposes the full VS Code API. Key namespaces:

vscode.commands — register and execute commands
vscode.window — show messages, input boxes, webviews
vscode.workspace — access files, settings, workspace state
vscode.languages — register providers for completions, hover, diagnostics
vscode.debug — interact with the debugger

3Registering a Command

extension.ts

export function activate(ctx: vscode.ExtensionContext) {
  const cmd = vscode.commands.registerCommand(
    'myext.helloWorld',
    () => vscode.window.showInformationMessage('Hello!')
  );
  ctx.subscriptions.push(cmd);
}

4Publishing to the Marketplace

Terminal

npm install -g @vscode/vsce
vsce package    # creates a .vsix file
vsce publish    # publish to marketplace (requires PAT)

5Testing Extensions

Use @vscode/test-electron to write integration tests that run inside the Extension Development Host. Each test opens a real VS Code window and exercises your extension's commands and APIs programmatically.

← Lesson 38: GitHub Codespaces & vscode.dev Lesson 40: Pro VS Code Workflow & Mastery →

All 40 Lessons

Pick any lesson to jump straight to it.

Getting Started with VS Code

FoundationBeginner

The VS Code Interface & Layout

FoundationBeginner

Installing & Managing Extensions

ExtensionsBeginner

Keyboard Shortcuts & Command Palette

ProductivityBeginner

Settings, Themes & Customization

CustomizationBeginner

IntelliSense & Code Completion

Editor FeaturesBeginner

Integrated Terminal Mastery

ProductivityBeginner

Search, Find & Replace Across Files

Editor FeaturesBeginner

Git & Source Control with VS Code

Version ControlBeginner

Snippets & Emmet Abbreviations

ProductivityBeginner

GitHub Copilot — Getting Started

AI & CopilotIntermediate

Copilot Chat & Inline Ask

AI & CopilotIntermediate

JavaScript & TypeScript Development

LanguagesIntermediate

Python Development in VS Code

LanguagesIntermediate

Debugging Like a Pro

DebuggingIntermediate

Linting, Formatting & ESLint

Code QualityIntermediate

Multi-Cursor Editing & Refactoring

Editor FeaturesIntermediate

Workspaces & Multi-Root Projects

WorkspaceIntermediate

Tasks, Build Systems & npm Scripts

WorkflowIntermediate

Testing with Jest, Vitest & Pytest

TestingIntermediate

React Development Workflow

Web DevIntermediate

Node.js & Express in VS Code

BackendIntermediate

Docker & Dev Containers

DevOpsIntermediate

Live Share — Real-Time Collaboration

CollaborationIntermediate

Jupyter Notebooks in VS Code

Data ScienceIntermediate

REST Client & API Testing

API DevIntermediate

SSH Remote Development

Remote DevIntermediate

WSL 2 Integration on Windows

Remote DevIntermediate

Advanced Debugging: Breakpoints & Watch

DebuggingAdvanced

Copilot Agent Mode — Agentic Workflows

AI & CopilotAdvanced

Profile & Performance Optimisation

PerformanceAdvanced

GitHub Actions & CI/CD Integration

Custom Keybindings & Key Maps

CustomizationAdvanced

Settings Sync & Dotfiles Management

WorkflowAdvanced

Language Server Protocol (LSP) Explained

InternalsAdvanced

Rust Development in VS Code

LanguagesAdvanced

Go Development in VS Code

LanguagesAdvanced

GitHub Codespaces & vscode.dev

Remote DevExpert

Writing Your First VS Code Extension

Extension DevExpert

Pro VS Code Workflow & Mastery

→