SuperAPI AI 工具集

setup-component-explorer-light

智能体与模型

查看项目

更新于 10-16 00:32

技能介绍

用途:以最小步骤为使用 Vite 的项目接入 Component Explorer,让组件 fixture 通过开发服务器在 ___explorer 路径下预览。需要完整方案(CLI 守护进程、VS Code 任务与启动配置)时改用 setup-component-explorer-full 技能。

前置条件:项目以 Vite 为打包器,Node.js >= 22。

主要步骤:

  1. 安装依赖:npm install @vscode/component-explorer @vscode/component-explorer-vite-plugin,可使用项目自身的包管理器;monorepo 中安装到拥有 Vite 配置的包。
  2. 在 vite.config.ts 中加入 componentExplorer() 插件:import { componentExplorer } from '@vscode/component-explorer-vite-plugin'; 并放入 plugins 数组。

插件选项与默认值:include 默认 './src/**/*.fixture.{ts,tsx}';route 默认 '/___explorer';build 默认 'app-only'(可选 'all' 或 'explorer-only');outFile 默认 '___explorer.html';logLevel 默认 'info'。fixture 不在 ./src 时需显式设置 include。

  1. 启动 Vite 开发服务器(如 npx vite、pnpm dev),再用 VS Code 命令 simpleBrowser.show 打开 http://localhost:5173/___explorer,端口按实际调整。

编写 fixture 前需先阅读 use-component-explorer 技能了解 fixture 写法与项目包装约定。

可选 MCP 集成:安装 npm install @vscode/component-explorer-cli;在 Vite 配置旁或项目根创建 component-explorer.json,配置 sessions 与 server(type 为 http,url 指向开发服务器);再在 .vscode/mcp.json 注册 stdio 服务器,命令为 npx component-explorer mcp -p ./component-explorer.json,路径按实际情况调整。

限制:仅适用于使用 Vite 的项目;需要 Node.js >= 22;未提及收费与跨框架支持情况。