WebStorm 不内置 Storybook 支持，关键在于正确识别项目结构、类型定义和运行脚本：需规范 package.json 的 storybook 脚本、补全 tsconfig.json 的 baseUrl/paths、匹配 Storybook 与 TS 类型版本、关闭 Safe Write 保障 HMR，并确保 storybook/main.ts 使用 ES Module 导出。
WebStorm 本身不内置 Storybook 支持，但只要项目结构、类型系统和运行脚本被正确识别，就能实现跳转、补全、HMR 全链路可用——关键不是“配 Storybook”，而是让 WebStorm 理解你的 Storybook 项目。
WebStorm 找不到 Run Storybook 菜单项？检查 package.json 的 scripts
WebStorm 依赖 package.json 中的标准脚本名来自动注册运行配置。如果右键没出现 “Run Storybook”，大概率是脚本未被识别：
-
storybook是唯一被 WebStorm 默认识别的脚本名（大小写敏感），推荐直接使用："storybook": "start-storybook -p 6006 -s ./public" - 用
sb:dev或dev:storybook这类自定义名，WebStorm 不会自动发现，必须手动创建npm运行配置 - 命令必须以
start-storybook或build-storybook开头；写成node ./node_modules/.bin/start-storybook也能识别，但不推荐 - 若用
pnpm，确保 WebStorm 版本 ≥ 2023.3，或在Settings > Tools > Terminal中将 shell path 指向pnpm可执行文件
组件路径别名（如 @/components）跳转失败？补全 tsconfig.json 的 baseUrl 和 paths
Storybook 常用别名导入组件，但 WebStorm 默认不解析 paths 映射，导致 Ctrl+Click 跳转到 404 或拼错路径：
- 确认
tsconfig.json（或jsconfig.json）中已声明："baseUrl": "./"和"paths": { "@/*": ["src/*"] } - 改完后必须执行
File > Reload project from Disk，否则 WebStorm 缓存不会更新映射 - 如果项目用的是
webpack.alias但没配tsconfig.json，WebStorm 仍无法跳转——TypeScript 语言服务只认tsconfig.json的paths
.stories.tsx 里 args、Meta 类型报红或无补全？验证 Storybook 类型包与 TS 版本匹配
类型缺失通常不是 WebStorm 问题，而是类型定义未加载或版本错配：
- Storybook v7+ 已将类型内置在
@storybook/react（或其他框架包）中，**不需要再装@types/storybook__react**；装了反而可能冲突 - 确保 WebStorm 使用的是项目本地的 TypeScript：进
Settings > Languages & Frameworks > TypeScript，勾选Use TypeScript version in node_modules -
.storybook/main.ts必须用 ES Module 导出：export default defineConfig({ ... })；若误写为module.exports = { ... }，WebStorm 的 TS/JS 混合解析会失效，导致类型丢失
修改组件后 Storybook 不热更新？关掉 WebStorm 的 Safe Write
WebStorm 默认开启 Safe Write（先写临时文件再原子替换），这会中断 webpack-dev-server 的文件监听，导致 HMR 卡住或延迟：
- 关闭路径：
Settings > Appearance & Behavior > System Settings，取消勾选Use "safe write" (save changes to a temporary file first) - 同时建议关闭
Settings > Appearance & Behavior > System Settings > Synchronize files on frame activation，避免焦点切回 WebStorm 时触发多余文件同步 - 重启 Storybook 后验证：改一个组件的
label字符串，浏览器应 1–2 秒内刷新，且控制台无Compilation completed以外的警告
最常被忽略的是 tsconfig.json 路径映射未重载，以及 main.ts 用了 CommonJS 导出——这两处一错，整个类型和跳转就断链，但错误提示很隐蔽，容易当成 WebStorm 本身 bug 去折腾。
