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).
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Build VS Code extensions from scratch or convert existing web apps into portable, shareable extensions.
VS Code extensions run in two contexts:
Build stack: TypeScript + esbuild (extension) + Vite (webviews)
assets/ based on your needs (see decision tree below)package.json: name, displayName, publisher, descriptionnpm install then npm run build| 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/ |
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.
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.
Hierarchical data in the sidebar (file explorers, outlines, lists).
vscode.window.registerTreeDataProvider('myTreeView', new MyTreeProvider());
See references/tree-view-patterns.md for TreeDataProvider patterns.
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.
To convert a JS/React/Vue app into an extension:
| 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.
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.
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.
Use postMessage for bidirectional communication:
// Extension → Webview
panel.webview.postMessage({ type: 'update', data: {...} });
// Webview → Extension
panel.webview.onDidReceiveMessage(msg => {
if (msg.type === 'save') { /* handle */ }
});
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.
npm install -g @vscode/vsce
vsce package
This creates my-extension-0.0.1.vsix.
Exclude unnecessary files:
.vscode/**
node_modules/**
src/**
*.ts
tsconfig.json
esbuild.js
vite.config.ts
code --install-extension file.vsixvsce publish (requires Microsoft account)For extensions with native dependencies:
vsce package --target win32-x64
vsce package --target darwin-arm64
vsce package --target linux-x64
| 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 |
| 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 |
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Public-safe preliminary screen for challenges to the impartiality of an AI evaluator, LLM-as-a-judge, decision-support agent, or adjudicative system based on prior outputs, suspected bias, unstable reasoning, or self-reinforcing memory. Use when asked whether an AI should be recused, disqualified, replaced, audited, or escalated. Does not decide real cases or claim that human judicial-recusal doctrine automatically applies.
中文简介正在准备中。当前显示原文说明。
Creates an Agent Authority Charter for enterprise or regulated AI agents before deployment. Use this Skill when a user needs to define what an AI agent is allowed to do, who delegated authority to it, what actions are permitted or prohibited, when human approval is required, what evidence must be preserved, and how the agent can be suspended, revoked, or escalated.
中文简介正在准备中。当前显示原文说明。
EU AI Act Knowledge Engine — authoritative regulatory Q&A grounded in 70 official EU source documents (including the 2026 Commission draft guidelines on Art. 6 high-risk classification — general principles, Annex I, Annex III). Answers any question about the AI Act with article-level citations from the full regulation text, Commission guidelines, EDPB/EDPS opinions, codes of practice, harmonised standards, FRIA guides, incident templates, and sector-specific guidance. This skill should be used when the user asks about the "EU AI Act", "AI Act regulation", "Regulation 2024/1689", "KI-Verordnung", asks to "explain an AI Act article", "what does Article X say", "AI Act requirements", "AI Act penalties", "AI Act timeline", "GPAI obligations", "high-risk AI", "prohibited AI practices", "AI Act and GDPR", "fundamental rights impact assessment", "AI Act standards", "AI Act national implementation", "AI literacy", "serious incident reporting", "Digital Omnibus", "AI regulatory sandbox", or any question about EU artificial intelligence regulation. Also triggers on German terms: "KI-Gesetz", "KI-Verordnung", "Hochrisiko-KI", "KI-Kompetenz", "Grundrechte-Folgenabschaetzung", "GPAI-Verhaltenskodex". For assessment workflows that produce a classification decision rather than a knowledge answer, offer to run a structured risk-tier classification in-session.
中文简介正在准备中。当前显示原文说明。
This skill builds a structured audit trail of an AI-assisted task: what the tool was asked to do, what materials it was given, what it produced, how the output was verified, and what was ultimately relied upon. It documents the workflow for supervision and later review without ruling on privilege or disclosure, so the record stays accurate rather than self-serving.
中文简介正在准备中。当前显示原文说明。
Use this skill when the user wants an AI governance, legal-risk, privacy, compliance, procurement, or vendor-risk review of an internal AI use case, an AI product feature, an LLM workflow, or a third-party AI vendor. The skill asks intake and clarifying questions first when facts or evidence are missing, identifies required documentation and missing evidence, maps the use case to AI governance frameworks and applicable legal domains, and produces a preliminary or final governance review with scorecards, findings, owners, remediation actions, and follow-up questions.
中文简介正在准备中。当前显示原文说明。
Turn an interpretive-ambiguity audit of a legal text — contract, statute, regulation, or judicial opinion — into a polished deliverable. Produces a multi-page website (default), a single-page interactive site, a Microsoft Word document, a PowerPoint deck, or a LaTeX/PDF. Use whenever a user has a stress-test result, ambiguity audit, or "where will this be litigated" scenarios and wants to publish, present, or share them. Triggers on "publish the audit," "make a report from this," "turn this into a website / deck / brief / Word doc," "make a Netlify site," "build slides of these ambiguities," "render the scenarios," "package this stress test," "produce a LaTeX version," and similar. Pairs with the ambiguity-stress-test skill (the underlying analysis) but works on any structured or semi-structured ambiguity analysis. Visual design is opinionated but the user can override colors, fonts, and brand label. Most formats need Python and a writable filesystem; single-file HTML works where the host has neither.
中文简介正在准备中。当前显示原文说明。