Sublime构建React应用工作流_集成ESLint与Prettier自动化代码格式化

Sublime Text 可通过配置 ESLint 和 Prettier 实现轻量高效的 React 开发。需安装 Package Control、SublimeLinter-eslint、Prettier 等插件，配置自动保存格式化与 ESLint 实时校验，并可自定义构建系统支持一键修复。

Sublime Text 本身不是 React 开发的主流 IDE（如 VS Code 更常见），但它完全能胜任轻量、快速的 React 开发，关键在于合理配置构建系统、ESLint 和 Prettier，实现保存即校验 + 自动格式化。核心不是“替代 VS Code”，而是“用最简工具链守住代码质量”。

安装必要插件：PackageControl 是起点

确保已安装 Package Control（若未安装，官网有 1 行命令引导）。之后通过 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）调出命令面板，依次安装：

• SublimeLinter —— ESLint 的 Sublime 封装基座
• SublimeLinter-eslint —— 实际对接本地 ESLint（需项目内已安装 eslint 和 eslint-config-react-app 等）
• Prettier（由 Glavin001 维护的社区版）—— 提供保存时自动格式化支持
• EditorConfig（可选但推荐）—— 统一缩进、换行等基础风格，与团队保持一致

让 ESLint 在 Sublime 中真正生效

SublimeLinter-eslint 默认会查找项目根目录下的 .eslintrc.js 或 .eslintrc.json。确保你的 React 项目已初始化 ESLint：

• 运行 npx eslint --init，选择 “React”、“TypeScript”、“JSX”、“Browser” 等匹配项
• 推荐基于 eslint-config-react-app（Create React App 官方规则），避免手动配置大量规则
• 在 package.json 中确认有 "eslint": "^8.x" 和 "eslint-config-react-app": "^7.x"
• 重启 Sublime 后，打开 .jsx 或 .tsx 文件，错误会以波浪线下划线 + 右侧 gutter 图标形式实时提示

用 Prettier 实现“保存即格式化”

安装 Prettier 插件后，默认不开启自动格式化。需手动启用并绑定到保存动作：

标签： linux react sublime js json node typescript windows npm app