vscode-extension-dev

Scaffold VS Code extensions with TypeScript and esbuild.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/macCesar/aiskills --skill vscode-extension-dev-maccesar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vscode-extension-dev
Source: https://github.com/macCesar/aiskills/tree/main/skills/vscode-extension-dev
Command: npx skills add https://github.com/macCesar/aiskills --skill vscode-extension-dev-maccesar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers build VS Code extensions from scratch by providing a structured, API-driven development workflow aligned with the official VS Code Extension API docs.

Core Features & Use Cases

  • Scaffold a new extension project with TypeScript and esbuild, following best practices for VS Code extension architecture.
  • Learn and apply key APIs and patterns (TreeView, QuickPick, Webview, StatusBar, commands, configuration, SecretStorage, progress indicators).
  • Understand layered architecture guidance (VS Code UI layer, business logic layer, data layer) and how to wire references into real projects.
  • Debug, test, bundle, and publish extensions to the VS Code Marketplace or Open VSX; reuse reference files to accelerate implementation.

Quick Start

Start by scaffolding a new VS Code extension project and implement a sample feature using a TreeView and a Webview.

Frequently Asked Questions about vscode-extension-dev

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

FAQPage Schema
How do I scaffold a new VS Code extension with TypeScript and esbuild?

To scaffold a VS Code extension, initialize a TypeScript project with esbuild, following official API architecture patterns for safe, standard development. This structured workflow ensures correct configuration of activation events, commands, and bundling from the start.

What is the best way to implement a Webview in a VS Code extension?

The best way to implement a Webview in a VS Code extension is by following official API docs for UI components. This ensures safe message passing and state management between the Webview panel and your extension's business logic layer.

How do I use TreeView and QuickPick APIs in VS Code extension development?

Using TreeView and QuickPick APIs in VS Code extension development involves wiring official UI components to your data layer. The Skill guides you through standard provider patterns and user input handling.

Can I use SecretStorage and StatusBar APIs in my VS Code extension?

Yes, you can use SecretStorage and StatusBar APIs in your VS Code extension. The guidance covers implementing these key APIs securely, ensuring standard patterns for sensitive data storage and status indicators.

Does this VS Code extension guide cover testing and publishing to Open VSX?

Yes, this VS Code extension guide covers testing, bundling with esbuild, and publishing to the VS Code Marketplace or Open VSX. It provides a complete workflow from debugging to marketplace deployment.

What layered architecture should I follow when building VS Code extensions?

When building VS Code extensions, follow a layered architecture separating the VS Code UI layer, business logic layer, and data layer. This pattern enforces safe, standard development by decoupling API interactions from core logic.