VSCode配置Storybook开发_独立开发与测试前端UI组件教程-VSCode-PHP中文网

Storybook在VSCode中无法运行的根本原因是服务未真正启动，需先执行npm run storybook并确认终端输出Local: http://localhost:6006/且无错误；端口占用、main.js路径配置错误、story文件命名或导出不规范、Vite HMR配置不当等均会导致预览失败。

vscode配置storybook开发_独立开发与测试前端ui组件教程

Storybook

在 VSCode 里跑不起来，不是插件没装对，而是服务根本没真正跑通——先确认 npm run storybook 能在终端输出 Local: http://localhost:6006/，否则所有跳转、预览、热更新都是空谈。

确认 Storybook 服务已实际启动并可访问

很多“VSCode 集成失败”其实是 Storybook 自身没跑起来，VSCode 只是忠实转发了连接失败。

终端执行 npm run storybook 后，盯住输出：必须看到 Local: http://localhost:6006/ 且没有 ERROR 或卡在 Building preview... 超过 90 秒
如果提示 ERR_CONNECTION_REFUSED，立刻查端口：macOS/Linux 执行 lsof -i :6006，Windows 执行 netstat -ano | findstr :6006，杀掉占用进程再重试
port 可在 .storybook/main.js 中修改（如 port: 6007），但改完必须重启服务，VSCode 不会自动感知端口变更
浏览器能打开但 VSCode 插件打不开？检查 .vscode/settings.json 是否写了正确的 "storybook.previewUrl": "http://localhost:6006"

Storybook for VS Code 插件的右键菜单失效原因

装了插件却看不到 Open Story for Current File，大概率是路径配置或导出名不匹配。

插件依赖 .storybook/main.js 中的 stories 字段来扫描文件，比如：stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'] —— 如果你把 stories 放在 packages/ui/src，这个 glob 就扫不到
右键菜单只识别 *.stories.tsx 等后缀文件，Button.story.tsx 或 button.stories.ts 都不会被识别
Button.stories.tsx 必须默认导出一个名为 Button 的对象（或具名导出 export const Button = { ... }），否则插件无法关联到 Button.tsx 组件源码
如果项目是 monorepo，且组件在 workspace 根目录，而 Storybook 运行在子包中，需在 main.js 的 refs 或扩展路径中显式声明映射

Vite 构建下 Storybook 热更新（HMR）不生效

改了组件代码，VSCode 里预览窗格不动，不是插件问题，是 Vite 的 HMR 配置被关了或监听范围不对。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

检查 .storybook/main.js 是否启用了 watchOptions（v7+ 默认开启，但可能被覆盖）
重点看 vite.config.ts：有没有误设 server.hmr.overlay = false 或 server.watch.ignored 把 src/ 加进去了
终端若出现 HMR disconnected 或 Failed to load module，就别刷新页面了，直接看这行错误的时间戳和上下文——它比 UI 表现更准
某些框架适配器（如 @storybook/react-vite）要求 viteFinal 配置返回完整 vite config 对象，而不是只改部分字段

在 VSCode 侧边实时预览单个 Story 文件

不用开浏览器、不用点命令面板，直接在编辑器里看效果，但需要两个前提都满足。

确保已安装官方插件 Storybook for VS Code，且 VSCode 已重启（插件激活依赖工作区加载时机）
右键点击 Button.stories.tsx → Open Preview to the Side，不是 Open Storybook —— 后者打开的是完整导航页
该功能依赖 .storybook/preview.js 或 preview.ts 中启用对应框架的预览支持，React 项目要确认有 export const parameters = { ... } 且未禁用 docs 或 canvas tab
预览窗格不会自动聚焦 Canvas 标签页，首次打开可能停在 Docs，手动点一下 Canvas 标签才能触发渲染