vscode-extension-builder

Enforce best practices for building VS Code extensions with TypeScript, Vitest, and GitHub Actions.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/luisitoys12/luxcode-ai --skill vscode-extension-builder-luisitoys12
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vscode-extension-builder
Source: https://github.com/luisitoys12/luxcode-ai/tree/main/.agent/skills/vscode-extension-builder
Command: npx skills add https://github.com/luisitoys12/luxcode-ai --skill vscode-extension-builder-luisitoys12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill codifies best practices for creating professional-quality VS Code extensions, offering a clear blueprint to follow across commands, WebViews, TreeViews, language features, CI/CD, and publishing workflows.

Core Features & Use Cases

  • Opinionated extension structure: guidance on activation, commands, panels, providers, and services to enforce a clean architecture.
  • Packaging and publishing: rules for using vsce, GitHub Actions, and marketplace publishing with secure release pipelines.
  • WebView security and UX: recommended CSP, nonce, and accessibility patterns to ensure safe, accessible web content.
  • Audit and refactor support: directives to review existing extensions and enforce best practices during audits.

Quick Start

Install and configure a VS Code extension project following the standard structure and key tooling outlined above.

Frequently Asked Questions about vscode-extension-builder

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

FAQPage Schema
What is the best way to structure a VS Code extension project?

The best way to structure a VS Code extension is to separate activation, commands, panels, providers, and services into a clean architecture that enforces maintainability and scalability. This opinionated structure ensures clear boundaries between UI components and business logic, simplifying long-term development.

How do I configure GitHub Actions to publish a .vsix file to the marketplace?

To publish a .vsix file via GitHub Actions, configure a CI/CD pipeline using vsce for packaging and secure release workflows for marketplace publishing. This approach automates extension deployment securely, ensuring consistent versioning and distribution directly from your repository.

How do I secure WebViews in VS Code extensions?

To secure WebViews in VS Code, apply strict Content Security Policy (CSP) rules, use nonces for script execution, and follow accessibility patterns for web content. These practices prevent malicious code injection and ensure the extension's UI remains safe for all users.

Can I audit an existing VS Code extension for best practices?

Yes, you can audit existing VS Code extensions by reviewing them against established directives for project structure, TypeScript strict mode, and Vitest tests. This process identifies architectural flaws and enforces best practices during refactoring to improve overall code quality.

Does this VS Code extension guidance support TypeScript strict mode and Vitest?

Yes, this guidance enforces TypeScript strict mode and integrates Vitest tests to ensure professional-quality code and robust test coverage. Adopting these tools helps catch type errors early and provides a reliable testing framework for commands and language providers.