$ loading_
帮助你完整搭建 Component Explorer，配置 CLI、MCP、VS Code 任务与调试环境。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "setup-component-explorer-full" 技能： 1. 下载 https://raw.githubusercontent.com/microsoft/vscode-team-kit/main/component-explorer/skills/setup-component-explorer-full/SKILL.md 2. 保存为 ~/.claude/skills/setup-component-explorer-full/SKILL.md 3. 装好后重载技能，告诉我可以用了
请帮我完整设置 Component Explorer，包括安装 CLI、配置 MCP server、生成 VS Code tasks 和 launch.json，并说明每一步用途。
一套可直接使用的安装与配置步骤，包含相关配置文件内容和用途说明。
这是一个已有前端项目，请为它补齐 Component Explorer 的完整配置，包含 CLI 命令、MCP server 配置、VS Code 任务和调试启动项。
针对现有项目结构生成的增量配置方案，便于快速接入和调试。
我的 Component Explorer 无法在 VS Code 中正常启动，请检查我缺少哪些 CLI、MCP 或 launch/task 配置，并给出完整修复方案。
定位缺失或错误配置的原因，并提供可执行的修复步骤与完整示例。
When the user asks to add, set up, or integrate the component explorer into their project, follow this guide.
npm install @vscode/component-explorer @vscode/component-explorer-cli @vscode/component-explorer-vite-plugin
Use the project's package manager (npm, pnpm, yarn). For workspace monorepos, install into the package that owns the Vite config.
Add componentExplorer() to vite.config.ts:
import { componentExplorer } from '@vscode/component-explorer-vite-plugin';
export default defineConfig({
plugins: [
// ... existing plugins (react, tailwind, etc.)
componentExplorer(),
],
});
| Option | Default | Description |
|---|---|---|
include |
'./src/**/*.fixture.{ts,tsx}' |
| Glob pattern for fixture files |
route | '/___explorer' | URL path for the explorer UI |
build | 'app-only' | Build mode: 'app-only', 'all', or 'explorer-only' |
outFile | '___explorer.html' | Output filename for built explorer |
logLevel | 'info' | 'silent', 'info', 'verbose', 'warn', 'error' |
For projects where fixtures live outside ./, set include explicitly:
componentExplorer({
include: './test/**/*.fixture.{ts,tsx,js,jsx}',
}),
component-explorer.jsonCreate a configuration file for the CLI/daemon/MCP features (place next to the Vite config or at the project root):
{
"$schema": "./node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
"screenshotDir": ".screenshots",
"viteConfig": "./vite.config.ts",
// If you need a stable port, configure the redirection server port (required for the launch config in Step 6):
"redirection": { "port": 5331 }
}
Create or update .vscode/mcp.json to add the component explorer MCP server. This enables AI agents to take screenshots, compare fixtures, and interact with components:
{
"servers": {
"component-explorer": {
"type": "stdio",
"command": "npm",
"args": [
"exec",
"component-explorer",
"--no",
"--",
"mcp",
"-p",
"./component-explorer.json"
]
}
}
}
Adjust the -p path to point to the component-explorer.json location relative to cwd.
Add a task to .vscode/tasks.json to start the component explorer server:
{
"version": "2.0.0",
"tasks": [
{
"label": "Component Explorer Server",
"type": "shell",
"command": "./node_modules/.bin/component-explorer serve -p ./component-explorer.json --kill-if-running",
"isBackground": true,
"problemMatcher": {
"owner": "component-explorer",
"fileLocation": "absolute",
"pattern": {
"regexp": "^\\s*at\\s+(.+?):(\\d+):(\\d+)\\s*$",
"file": 1,
"line": 2,
"column": 3
},
"background": {
"activeOnStart": true,
"beginsPattern": ".*Setting up sessions.*",
"endsPattern": "Redirection server listening on.*"
}
}
}
]
}
If other tasks already exist, merge the new task into the existing tasks array.
To open the component explorer UI in Chrome, add a launch configuration to .vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Component Explorer (Chrome)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5331/___explorer",
"preLaunchTask": "Component Explorer Server"
}
]
}
…
调用多模型交叉审查代码变更、PR与高风险修改，辅助发现缺陷与争议点
将 VSCode 与 MCP 连接，让 AI 实时获取诊断、符号与代码导航信息