Sublime Text 可作为轻量高效编辑器配合 Storybook 开发，需配置语法高亮、ESLint 校验、项目结构管理及终端集成，并利用 JSDoc 编写内联文档，依托 Storybook CLI 实现热更新与文档生成。
Sublime Text 本身不直接支持 Storybook 的运行和热更新，但它完全可以作为轻量、高效的代码编辑器来配合 Storybook 进行 UI 组件开发与文档用例编写——关键在于合理配置工作流和借助外部工具链。
用 Sublime 编写组件与故事（Story）文件
Storybook 的核心是标准的 JavaScript/TypeScript + JSX/TSX 文件。Sublime 对这些语法有良好支持，安装 JS Custom 或 Babel 插件可获得更准确的高亮与片段补全。推荐启用以下设置：
- 开启 Auto Indent 和 Convert Indent to Spaces（通常为 2 空格，与主流 Storybook 脚手架一致）
- 安装 ESLint-Formatter 或搭配 SublimeLinter + eslint，实时校验组件 API 与故事写法规范
- 为
.stories.tsx文件关联 JSX 语法高亮（右下角点击语法名 → Open all with current extension as… → JavaScript (Babel)）
在 Sublime 中高效管理 Storybook 项目结构
典型 Storybook 项目中，组件与对应故事常共存于同一目录（如 Button/Button.tsx + Button/Button.stories.tsx）。Sublime 的侧边栏和 Ctrl+P（Goto Anything） 能快速跳转：
- 输入
Button.sto即可匹配Button.stories.tsx - 用 Project → Save Project As… 保存当前 Storybook 工作区，包含常用路径和文件夹排除（如忽略
node_modules、dist） - 在
project.sublime-project中添加"folder_exclude_patterns": ["**/.storybook/__generated__"]，减少干扰
配合终端运行 Storybook，Sublime 专注编码
Sublime 不替代 Node 环境，但可无缝衔接命令行工作流：
- 在 Sublime 中用 Ctrl+Shift+P → Terminal: New Terminal（需安装 Terminal 插件）快速打开项目根目录终端
- 执行
npm run storybook启动服务后，浏览器自动打开http://localhost:6006，所有组件变更实时预览 - 编辑时保存（Ctrl+S），Storybook 的 HMR（热模块替换）会立即反映 UI 和交互变化，无需刷新页面
用 Markdown + JSDoc 补充 Sublime 内联文档
Storybook 支持 CSF（Component Story Format）v3，允许在 .stories.tsx 中用 JSDoc 注释描述组件用途、参数与用例意图，Sublime 可清晰显示：
- 在组件导出前添加多行注释，例如：
/*** 按钮组件，支持主色、禁用、加载态* @story default - 默认按钮* @story disabled - 禁用状态*/ - 搭配 Storybook 插件（如 Docs Addon），这些注释会自动生成文档页中的“Description”区块
- Sublime 的 DocBlockr 插件能自动补全 JSDoc 模板，提升编写效率
基本上就这些。Sublime 不提供开箱即用的 Storybook 集成，但胜在响应快、定制强、无冗余功能干扰——把组件逻辑、故事定义、文档注释写清楚，再交给 Storybook CLI 去运行和展示，分工明确，效率不低。
