vscode-extension-builder

Scaffold VS Code extensions with Yeoman templates and TypeScript configuration.

3|Updated Jan 1, 2026
One-click install
npx skills add https://github.com/kjgarza/marketplace-claude --skill vscode-extension-builder
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vscode-extension-builder
Source: https://github.com/kjgarza/marketplace-claude/tree/main/plugins/senior-software-developer/skills/vscode-extension-builder
Command: npx skills add https://github.com/kjgarza/marketplace-claude --skill vscode-extension-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers bootstrap professional VS Code extensions from concept to runnable projects.

Core Features & Use Cases

  • Structured scaffolding: Provides a clear starting point for Command Extensions, Language Features, Webview Extensions, and Extensions packaging.
  • Best-practice guidance: Includes references to extension anatomy, common APIs, activation events, and publishing guidelines.
  • Real-world workflow: Walks through initialization, development, testing, and packaging to ship a production-ready extension.

Quick Start

Use the vscode-extension-builder skill to scaffold a new VS Code extension. Run: npx --package yo --package generator-code -- yo code, then choose New Extension (TypeScript), fill in name/identifier/description, enable Git, and select a bundler (esbuild or webpack). Then open in VS Code and press F5 to debug, and package with vsce if ready.

Frequently Asked Questions about vscode-extension-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new VS Code extension using TypeScript?

Scaffolding a VS Code extension involves running Yeoman templates via `npx --package yo --package generator-code -- yo code`, selecting New Extension (TypeScript), and configuring project details to generate a complete, runnable extension structure.

What types of VS Code extensions can I generate with this workflow?

This scaffolding workflow supports generating Command Extensions, Language Features, and Webview Extensions, along with the necessary TypeScript configuration and packaging setup for each project type.

Does this scaffolding workflow support both esbuild and webpack for VS Code extensions?

Yes, the scaffolding workflow supports both esbuild and webpack bundlers. During initialization with the Yeoman generator, you select your preferred bundler to configure the TypeScript project.

What is the best way to debug and package a VS Code extension before publishing?

The best way to debug is to open the generated project in VS Code and press F5 to launch a test instance. For packaging, use the `vsce` tool to bundle the extension when ready for publishing.

How do activation events work when structuring a VS Code extension?

Activation events define when your extension should load. The scaffolding workflow provides guidance on configuring these events correctly within the extension anatomy to ensure your TypeScript project loads efficiently.

Do I need Yeoman installed globally to generate a VS Code extension?

No, you do not need Yeoman installed globally. You can run the generator directly using `npx --package yo --package generator-code -- yo code` to execute the scaffolding workflow on demand.