vscode-extension-builder-lawvable
GitHub用于从零构建VS Code扩展或将现有JS/React/Vue应用转换为扩展。支持命令、Webview、自定义编辑器、树视图及AI代理集成，提供模板决策与API映射指南。
Trigger Scenarios
Install
npx skills add lawve-ai/awesome-legal-skills --skill vscode-extension-builder-lawvable -g -y
SKILL.md
Frontmatter
{
"name": "vscode-extension-builder-lawvable",
"metadata": {
"author": "Antoine Louis (Lawvable)",
"license": "AGPL-3.0",
"version": "2026.02.04"
},
"description": "Build VS Code extensions from scratch or convert existing JS\/React\/Vue apps. Supports commands, webviews (React\/Vue), custom editors, tree views, and AI agent integration via file-bridge IPC. Use when user wants to create a VS Code extension, convert a web app to an extension, add webviews or custom UIs to VS Code, implement tree views, build custom file editors, integrate with AI agents, or package\/publish extensions (.vsix)."
}
VS Code Extension
Build VS Code extensions from scratch or convert existing web apps into portable, shareable extensions.
Architecture
VS Code extensions run in two contexts:
- Extension Host (Node.js) — Backend logic, file access, VS Code APIs
- Webviews (browser sandbox) — Custom UIs with HTML/CSS/JS (React, Vue, vanilla)
Build stack: TypeScript + esbuild (extension) + Vite (webviews)
Quick Start
- Choose a template from
assets/based on your needs (see decision tree below) - Copy the template to your project directory
- Update
package.json: name, displayName, publisher, description - Run
npm installthennpm run build - Press F5 in VS Code to launch Extension Development Host
Template Decision Tree
| Need | Template |
|---|---|
| Simple command/action | assets/basic-command/ |
| Custom UI panel (React) | assets/webview-react/ |
| Sidebar file tree | assets/tree-view/ |
| Custom file editor | assets/custom-editor/ |
| AI agent integration | assets/file-bridge/ |
Extension Types
Commands
Register actions triggered via Command Palette, keyboard shortcuts, or menus.
vscode.commands.registerCommand('myExt.doSomething', () => {
vscode.window.showInformationMessage('Done!');
});
See references/api-reference.md for common APIs.
Webviews
Full HTML/CSS/JS UIs in panels or sidebar. Use React for complex interfaces.
const panel = vscode.window.createWebviewPanel(
'myView', 'My Panel', vscode.ViewColumn.One,
{ enableScripts: true }
);
panel.webview.html = getWebviewContent();
See references/webview-patterns.md for React setup, messaging, and CSP.
Tree Views
Hierarchical data in the sidebar (file explorers, outlines, lists).
vscode.window.registerTreeDataProvider('myTreeView', new MyTreeProvider());
See references/tree-view-patterns.md for TreeDataProvider patterns.
Custom Editors
Replace the default editor for specific file types.
vscode.window.registerCustomEditorProvider('myExt.myEditor', new MyEditorProvider());
See references/custom-editor-patterns.md for document sync and undo/redo.
Converting Existing Apps
To convert a JS/React/Vue app into an extension:
- Assess — What does the app do? What VS Code features does it need?
- Map APIs — Replace web APIs with VS Code equivalents
- Restructure — Move UI into webview, logic into extension host
- Connect — Wire up postMessage communication
| Web API | VS Code Equivalent |
|---|---|
localStorage |
context.globalState / context.workspaceState |
fetch() |
vscode.workspace.fs or keep fetch for external APIs |
| Router | Multiple webview panels or sidebar views |
alert() |
vscode.window.showInformationMessage() |
prompt() |
vscode.window.showInputBox() |
confirm() |
vscode.window.showWarningMessage() with options |
See references/conversion-guide.md for detailed step-by-step process.
Build System
Extension code — Use esbuild (fast, simple):
// esbuild.js
esbuild.build({
entryPoints: ['src/extension.ts'],
bundle: true,
outfile: 'dist/extension.js',
external: ['vscode'],
format: 'cjs',
platform: 'node',
});
Webview code — Use Vite (HMR, React support):
// vite.config.ts
export default defineConfig({
build: {
outDir: '../dist/webview',
rollupOptions: { output: { entryFileNames: '[name].js' } }
}
});
See references/build-config.md for complete configurations.
package.json Manifest
Essential fields:
{
"name": "my-extension",
"displayName": "My Extension",
"publisher": "your-publisher-id",
"version": "0.0.1",
"engines": { "vscode": "^1.85.0" },
"main": "./dist/extension.js",
"activationEvents": [],
"contributes": {
"commands": [{ "command": "myExt.hello", "title": "Hello" }]
}
}
The contributes section defines commands, menus, views, settings, keybindings, and more.
See references/contribution-points.md for all contribution types.
IPC Patterns
Extension ↔ Webview
Use postMessage for bidirectional communication:
// Extension → Webview
panel.webview.postMessage({ type: 'update', data: {...} });
// Webview → Extension
panel.webview.onDidReceiveMessage(msg => {
if (msg.type === 'save') { /* handle */ }
});
Extension ↔ External Tools (AI Agents)
Use file-based IPC for communication with Claude Code or other agents:
// Watch for command files
fs.watch(commandDir, (event, filename) => {
if (filename.endsWith('.json')) {
const command = JSON.parse(fs.readFileSync(path.join(commandDir, filename)));
processCommand(command);
}
});
See references/ai-integration.md for the file-bridge pattern.
Packaging & Distribution
Package as .vsix
npm install -g @vscode/vsce
vsce package
This creates my-extension-0.0.1.vsix.
.vscodeignore
Exclude unnecessary files:
.vscode/**
node_modules/**
src/**
*.ts
tsconfig.json
esbuild.js
vite.config.ts
Distribution Options
- Direct sharing — Send .vsix file, install via
code --install-extension file.vsix - VS Marketplace — Publish with
vsce publish(requires Microsoft account) - Open VSX — Alternative registry for open-source extensions
Platform-Specific Builds
For extensions with native dependencies:
vsce package --target win32-x64
vsce package --target darwin-arm64
vsce package --target linux-x64
Reference Files
| File | When to Read |
|---|---|
| api-reference.md | Implementing extension features |
| contribution-points.md | Configuring package.json contributes |
| webview-patterns.md | Building React webviews |
| tree-view-patterns.md | Implementing tree views |
| custom-editor-patterns.md | Building custom file editors |
| build-config.md | Configuring esbuild/Vite |
| conversion-guide.md | Converting web apps |
| ai-integration.md | Integrating with AI agents |
Asset Templates
| Template | Description |
|---|---|
| basic-command/ | Minimal extension with one command |
| webview-react/ | React webview panel with messaging |
| tree-view/ | Sidebar tree view with provider |
| custom-editor/ | Custom editor for specific file types |
| file-bridge/ | File-based IPC for AI agents |
Version History
- 7f58aaf Current 2026-07-05 11:54
