Storybook for VS Code 扩展仅提供跳转、右键菜单和嵌入预览页功能，不启动服务；“隔离开发”依赖 Storybook 自身沙箱与 HMR，需手动运行 npm run storybook 并确保 .storybook/main.js 配置正确。
装了 Storybook for VS Code 扩展，不代表组件就能在 VSCode 里“隔离开发”——它只是个跳板，真正的隔离靠的是 Storybook 自身的运行时沙箱和 VSCode 的文件监听配合。
Storybook for VS Code 扩展到底干了什么
这个扩展不启动服务、不编译代码、也不托管预览页。它只做三件事：解析 .storybook/main.js 中的 stories 路径配置，匹配当前打开的组件文件名，然后生成跳转 URL；提供右键菜单项（如 Open Story for Current File）；在侧边栏嵌入一个 Webview 加载已运行的 http://localhost:6006 页面。
常见误解是“装完就能点一下预览”，但实际必须先手动跑 npm run storybook，否则 Webview 加载空白或报 ERR_CONNECTION_REFUSED。
- 扩展不会自动启动 Storybook，VSCode 本身也没有内置 Node.js 运行时来托管它
- 如果
.storybook/main.js里stories是空数组或 glob 路径写错（比如漏了**/或拼错后缀），右键菜单直接消失 - monorepo 项目中，扩展只认当前工作区根目录下的
.storybook/，子包里的配置无效
为什么“隔离开发”依赖 Storybook 启动方式而非扩展
所谓“隔离”，是指组件渲染环境与主应用解耦：没有全局状态污染、无路由干扰、无 API 请求副作用。这完全由 Storybook 的 preview.js 和框架适配器（如 @storybook/react）控制，不是扩展的功能范畴。
你改一个 useState 初始值，能立刻看到效果，靠的是 Storybook 内部启用的 HMR（热模块替换），而 VSCode 只是触发了保存事件。如果热更新失效，问题一定出在 .storybook/main.js 的 webpackFinal 或 Vite 的 watchOptions 配置上，跟扩展无关。
- 检查
.storybook/main.js是否含features: { previewMdx: true }（旧版）或previewAnnotations（v8+），否则 MDX 文档页无法加载 - Vite 用户注意：
vite.config.ts里若设了server.hmr.overlay = false，热更新会静默失败 - 禁止在
*.stories.tsx里调用未导出的工具函数或require()动态导入，这类代码会让 HMR 断连
右键跳转 404 的真实原因和修复路径
点击 Open Story for Current File 后跳转到 http://localhost:6006/stories/button--primary 却显示 404，90% 是 story 文件命名或导出不规范导致 Storybook 无法注册该 story ID。
Storybook 匹配逻辑是：从文件路径提取 basename（如 Button.stories.tsx → Button），再匹配默认导出的组件名或 default.title。一旦不一致，ID 就对不上。
- 文件名必须含
.stories.（两个点），Button.story.tsx或Button.test.stories.tsx都不被识别 - 导出必须是
export default { title: 'Components/Button' }或export default Button（且 Button 是命名导出或默认导出的 React 组件） - 如果用了
defineStory或自定义 ID，需确保id字段与跳转 URL 中的 slug 完全一致
真正卡住“隔离开发”的，从来不是 VSCode 插件装没装，而是 .storybook/main.js 配置是否让 Storybook 正确加载、识别、沙箱化你的组件。扩展只是把“写代码 → 看效果”之间的鼠标移动距离缩短了 2 秒，但那 2 秒背后，是整个构建链路的稳定性。
