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 插件后，默认不开启自动格式化。需手动启用并绑定到保存动作：
- 进入 Preferences → Package Settings → Prettier → Settings
- 在右侧用户设置中添加：
"auto_format_on_save": true,
"auto_format_on_save_excludes": ["*/node_modules/*", "*/dist/*"],
"prettier_cli_path": "./node_modules/.bin/prettier" - 确保项目已安装 Prettier：
npm install --save-dev prettier eslint-config-prettier - 推荐搭配
.prettierrc配置文件（内容可极简，如{"semi": false, "singleQuote": true}），Prettier 插件会自动识别
小技巧：一键修复 ESLint 可自动修复的问题
SublimeLinter-eslint 本身不提供“一键修复”，但可通过快捷键触发 ESLint 的 --fix 能力：
- 安装插件 SublimeLinter-contrib-eslint_d（提升响应速度）
- 配合终端命令：在项目根目录执行
npx eslint src/ --fix，适合批量修正 - 进阶：用 Build System 自定义一个 “ESLint Fix” 构建方案（Tools → Build System → New Build System），内容如下：
{
"cmd": ["npx", "eslint", "${file}", "--fix"],
"selector": "source.js, source.jsx, source.ts, source.tsx",
"working_dir": "${project_path}"
}
保存为 ESLint-Fix.sublime-build，之后按 Ctrl+B 即可对当前文件执行修复。
基本上就这些。不需要复杂配置，也不依赖庞大语言服务器，Sublime + ESLint + Prettier 的组合足够支撑中小型 React 项目的日常开发与协作规范。关键是把校验和格式化变成“无感但可靠”的背景服务。
