Tutorial Series · 5 Parts

Writing VS Code Extensions

A step-by-step, five-part interactive tutorial that takes you from an empty folder to a tested extension published on the Marketplace — scaffolding, contribution points, the Extension API, webviews & language features, and the full test-and-publish pipeline.

Scaffold → Contribute → Call the API → Build UI → Ship
yo code Extension Manifest Contribution Points Commands window & workspace Disposables Webviews Tree Views IntelliSense LSP vsce Marketplace

Who this is for. Developers comfortable with TypeScript/JavaScript and Node.js who want to extend Visual Studio Code — whether to add a single command, surface a custom view, light up a new language, or publish a polished extension to the world.

How to use it. Each part is a self-contained interactive deck (Reveal.js) with code you can copy and run. Work through them in order; every part ends with a hands-on exercise and points to the next.

The learning arc

01  Foundations

The Extension Host model, scaffolding with yo code, the manifest, activate(), and your first command running under F5.

02  Declaring Capabilities

The contributes map — commands, keybindings, menus, settings and when clauses that wire your extension into the UI.

03  The API

The vscode namespace in depth — messages, quick picks, the status bar, the workspace, documents, edits and the file system.

04  Rich Experiences

Tree views, webviews and their message channel, IntelliSense, diagnostics, and the Language Server Protocol.

05  Shipping It

Integration tests, bundling, packaging a .vsix, publishing to the Marketplace and Open VSX, and a CI/CD pipeline.

Presentations in this series

  1. 01
    Getting Started →
    What an extension is and the Extension Host architecture, prerequisites, scaffolding with yo code, the project anatomy, the package.json manifest, activate()/deactivate(), your first command, running under F5, activation events, and debugging.
    livePart 1markdown
  2. 02
    Commands & Contribution Points →
    The contributes map — declaring commands, activation events, keybindings, menus and groups, when-clause contexts, configuration/settings, view containers, and the full catalogue of contribution points.
    livePart 2markdown
  3. 03
    The Extension API →
    The vscode namespace map, disposables and context.subscriptions, messages, quick picks, input boxes, the status bar and progress, the workspace, TextDocument/TextEditor, edits, the file system and events.
    livePart 3markdown
  4. 04
    Webviews & Language Features →
    Tree views and TreeDataProvider, the Webview API and its bidirectional message channel, webview security (CSP & nonces), webview views, completion/hover/diagnostics providers, and the Language Server Protocol.
    livePart 4markdown
  5. 05
    Testing, Packaging & Publishing →
    Integration tests with @vscode/test-cli, linting and bundling, the .vscodeignore, packaging a .vsix with vsce, publishing to the Marketplace and Open VSX, semantic versioning, and a GitHub Actions CI/CD pipeline.
    livePart 5markdown

Navigating a deck

Next / Previous — → ← or swipe
Slide overview — Esc
Fullscreen — F
Export to PDF — append ?print-pdf then print

How these are built

Every deck is a single self-contained index.html — no build step, no npm install, no dependencies to download. Slides are authored in HTML and rendered with Reveal.js 4.6; code is highlighted with highlight.js; diagrams are hand-drawn inline SVG. Typeset in Outfit, Plus Jakarta Sans and Fira Code. Each deck also ships a plain-Markdown presentation.md version for reading on GitHub.

References

VS Code Extension API · Your First Extension · Contribution Points · vscode API reference · Language Server Protocol · Publishing Extensions