Storybook 可集成到 vscode 实现组件驱动开发：一、用 npx storybook@latest init 初始化；二、安装 Storybook for VS Code 插件；三、配置热重载与 6006 端口；四、右键 Open Preview to the Side 实时预览；五、配置 typescript 类型提示。
如果您在使用 VSCode 进行前端开发时希望高效预览和测试 ui 组件，Storybook 是一个关键工具。将 Storybook 集成到 VSCode 中可实现组件驱动开发的实时反馈与便捷调试。以下是完成该集成的具体步骤：
本文运行环境：macBook Pro，macOS Sequoia
一、安装 Storybook CLI 并初始化项目
通过命令行工具在现有项目中快速搭建 Storybook 环境，确保其与当前框架（如 react、vue）兼容，并生成标准配置文件结构。
1、打开终端并进入项目根目录。
2、执行 npx storybook@latest init 命令启动交互式初始化流程。
3、根据提示选择目标框架，确认自动生成 .storybook/ 目录与 stories/ 示例文件。
二、配置 VSCode 扩展支持
借助官方扩展增强 VSCode 对 Storybook 的识别能力，包括语法高亮、组件跳转、快捷启动等功能。
1、在 VSCode 扩展市场中搜索并安装 Storybook for VS Code 插件。
2、重启 VSCode 使插件生效。
3、在命令面板中输入 Storybook: Open Storybook，验证是否能直接唤起本地 Storybook 服务。
三、设置自动热重载与端口监听
确保组件修改后 Storybook 页面即时刷新，避免手动刷新操作，提升开发连贯性。
1、检查 package.json 中的 storybook 脚本是否包含 –no-manager-cache –port 6006 参数。
2、在终端中运行 npm run storybook 启动服务。
3、确认控制台输出中显示 Local: http://localhost:6006/ 且无编译错误。
四、在 VSCode 中启用组件快速预览
利用 VSCode 内置的预览功能或插件，在编辑器侧边实时查看组件 Story 效果，减少上下文切换。
1、在任意 *.stories.tsx 文件中右键，选择 Open Preview to the Side。
2、确保 .storybook/main.js 中已启用 features.previewMdx 或对应框架的预览支持项。
3、保存 Story 文件后，预览窗格应自动更新渲染结果。
五、配置 TypeScript 类型提示与自动补全
为 Story 文件添加精准类型定义，使组件属性、参数及装饰器具备完整 IDE 支持。
1、在项目中安装 @storybook/addon-themes 和 @storybook/types。
2、在 .storybook/preview.ts 中导入并配置 definePreview 函数。
3、在组件 Story 文件顶部添加 import type { Meta, StoryObj } from ‘@storybook/react‘;。