可实现VSCode内嵌Storybook预览与交互：安装官方扩展、配置previewUrl、通过命令面板打开预览、支持组件跳转故事文件、启用热重载联动更新。
如果您在VSCode中开发前端项目并希望直接预览和交互Storybook中的UI组件，则可能因缺少正确配置或扩展支持而无法启动或同步组件视图。以下是实现VSCode内Storybook集成的具体操作路径：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装Storybook官方VSCode扩展
该扩展提供组件快速跳转、实时预览面板与故事状态同步功能，依赖VSCode的Webview机制加载本地Storybook服务。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Ctrl+Shift+X）。
2、在搜索框中输入Storybook，找到由Storybook团队发布的官方扩展“Storybook for VS Code”。
3、点击“安装”，安装完成后重启VSCode。
二、配置本地Storybook服务端口与工作区映射
VSCode需明确识别当前项目中Storybook的启动命令与服务地址，以便在内部Webview中加载对应URL。
1、确保项目根目录下已存在.storybook/main.js（或main.ts）配置文件，并确认stories字段路径正确。
2、在终端中执行npm run storybook或yarn storybook，确认服务成功启动且默认监听在http://localhost:6006。
3、在VSCode工作区根目录下创建.vscode/settings.json（若不存在），添加如下配置：
4、在settings.json中写入："storybook.previewUrl": "http://localhost:6006"。
三、使用命令面板触发Storybook面板
启用扩展后，VSCode将注入Storybook专属命令，可绕过浏览器直接在编辑器右侧启动嵌入式预览界面。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
1、按下Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux）打开命令面板。
2、输入并选择Storybook: Open Preview。
3、等待Webview加载完成，右侧将显示Storybook导航树与当前选中组件的实时渲染区域。
四、在编辑器中快速跳转至对应故事文件
当光标位于组件源码内时，扩展可解析导出语句并自动关联其在Storybook中的对应故事文件，提升开发闭环效率。
1、打开一个React或Vue组件文件（如Button.tsx）。
2、将光标置于组件函数名或默认导出语句上。
3、右键选择Go to Storybook Story，或使用快捷键Cmd+Alt+S（macOS）。
4、VSCode将自动打开该组件对应的故事文件（如Button.stories.tsx），并高亮其Canvas或Docs标签页。
五、启用热重载联动调试
修改组件源码或故事文件时，VSCode可通过文件监听机制触发Storybook服务的HMR更新，避免手动刷新预览面板。
1、确保.storybook/main.js中已启用features: { previewMdxs: true }配置项。
2、在VSCode中打开设置，搜索“storybook hot reload”，勾选Storybook: Enable Hot Reload。
3、保存任意.stories.*文件后，右侧Storybook预览区域将在1秒内自动更新渲染结果。
