Comprehensive guide for creating VS Code extensions from scratch, including project scaffolding, API usage, activation events, and packaging. Use when user wants to create/build/generate/develop a VS Code extension or plugin, asks about VS Code extension development, needs help with VS Code Extension API, discusses extension architecture, wants to add commands/webviews/language support, or mentions scaffolding a VS Code project.
/plugin marketplace add kjgarza/marketplace-claude/plugin install kjgarza-senior-software-developer-plugins-senior-software-developer@kjgarza/marketplace-claudeThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/templates/README.mdassets/templates/command-extension/README.mdassets/templates/command-extension/extension.tsassets/templates/command-extension/package.jsonassets/templates/webview-extension/README.mdassets/templates/webview-extension/extension.tsassets/templates/webview-extension/package.jsonreferences/activation-events.mdreferences/best-practices.mdreferences/common-apis.mdreferences/extension-anatomy.mdBuild professional VS Code extensions with proper architecture, best practices, and complete tooling support.
For immediate extension creation:
npx --package yo --package generator-code -- yo codevsce package when readyFor detailed guidance, follow the workflow below.
Choose the type that matches your needs:
Ask user about:
Based on requirements, select appropriate pattern:
Simple Command Extension (most common):
Language Extension:
Webview Extension:
See extension-anatomy.md for detailed structure.
Option A: Use Yeoman Generator (Recommended)
npx --package yo --package generator-code -- yo code
Fill in:
Option B: Use Templates
For specific patterns, copy from assets/templates/:
command-extension/ - Command-based extensionlanguage-support/ - Language extension starterwebview-extension/ - Webview-based extensionFor Command Extensions:
package.json:{
"contributes": {
"commands": [{
"command": "extension.commandId",
"title": "Command Title"
}]
}
}
extension.ts:export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('extension.commandId', () => {
vscode.window.showInformationMessage('Hello from Extension!');
});
context.subscriptions.push(disposable);
}
For Language Extensions: See common-apis.md for language features APIs.
For Webview Extensions: See common-apis.md for webview creation patterns.
Activation Events determine when your extension loads:
onCommand: When command is invokedonLanguage: When file type opensonView: When tree view becomes visible*: On startup (avoid if possible)See activation-events.md for complete reference.
Contributions declare extension capabilities in package.json:
commands: Command Palette entriesmenus: Context menu itemskeybindings: Keyboard shortcutslanguages: Language supportviews: Tree viewsconfiguration: SettingsLocal Testing:
F5 in VS Code to launch Extension Development HostAutomated Testing:
@vscode/test-electron for testingCommon Issues:
contributes.commands and activation eventspackage.jsonPrepare for Publishing:
Package Extension:
npm install -g @vscode/vsce
vsce package
Creates .vsix file for distribution.
Publish to Marketplace:
vsce publish
Requires Azure DevOps personal access token.
Quick command that shows information:
vscode.commands.registerCommand('extension.showInfo', () => {
vscode.window.showInformationMessage('Information message');
});
Get input before executing:
vscode.commands.registerCommand('extension.greet', async () => {
const name = await vscode.window.showInputBox({
prompt: 'Enter your name'
});
if (name) {
vscode.window.showInformationMessage(`Hello, ${name}!`);
}
});
Work with active editor:
vscode.commands.registerCommand('extension.processFile', () => {
const editor = vscode.window.activeTextEditor;
if (!editor) {
vscode.window.showErrorMessage('No active editor');
return;
}
const document = editor.document;
const text = document.getText();
// Process text...
});
Show persistent status:
const statusBarItem = vscode.window.createStatusBarItem(
vscode.StatusBarAlignment.Right,
100
);
statusBarItem.text = "$(check) Ready";
statusBarItem.show();
context.subscriptions.push(statusBarItem);
Load these references as needed:
extension-anatomy.md: When you need details about:
package.json manifest fieldscommon-apis.md: When implementing:
activation-events.md: When configuring:
best-practices.md: When considering:
*package.json syntax (valid JSON)main field points to compiled outputDeveloper: Reload Windowpackage.json and codeactivate()npm install to install dependencies@types/vscode if neededonCommandonLanguage:mylangonView:myViewonCommandshowQuickPick with itemsFor code quality and architecture review of your extension code:
detect-code-smells: Check extension code qualitysecurity-pattern-check: Security review for extensionssuggest-performance-fix: Optimize extension performanceThis skill provides the complete workflow for VS Code extension development, from initial concept to published extension. Use progressive disclosure: start with Quick Start for simple cases, dive into references for complex requirements. Templates in assets/ provide copy-paste starting points for common patterns.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.