配置Sublime Text用于React开发需安装Emmet、Babel、ESLint等插件，设置Babel语法高亮，集成ESLint代码检查，并可选配置npm启动构建系统及优化编辑设置。
要配置 Sublime Text 用于 React 开发，关键在于安装合适的插件、语法高亮、代码提示和构建系统。虽然 Sublime 不像 VS Code 那样内置强大前端支持，但通过合理配置，依然可以高效开发 React 项目。
1. 安装必要插件
使用 Package Control 安装以下核心插件：
- Emmet：快速编写 HTML 和 JSX 结构
- Babel：为 .js 和 .jsx 文件提供 React 语法高亮（替代默认 JavaScript 语法）
- JSX：专用于 JSX 语法支持（可选，Babel 更全面）
- SublimeLinter 及 SublimeLinter-eslint：集成 ESLint 实现代码检查
- AutoFileName：自动补全文件路径
- ColorHighlighter：高亮颜色值
安装方法：按下 Ctrl+Shift+P 打开命令面板，输入 "Install Package"，然后搜索并安装上述插件。
2. 配置语法高亮与文件关联
确保 .js 和 .jsx 文件使用 Babel 的语法高亮：
立即学习“前端免费学习笔记（深入）”；
- 打开一个 .js 或 .jsx 文件
- 点击右下角显示的语法（如 "JavaScript"）
- 选择 Open All with Current Extension as... → Babel → JavaScript (Babel)
这样所有 .js 文件都会用 Babel 语法高亮，支持 ES6+ 和 JSX。
3. 集成 ESLint 进行代码检查
先确保项目中已安装 ESLint 和 React 相关规则：
npm init -y npm install eslint eslint-plugin-react --save-dev npx eslint --init
在 Sublime 中配置 SublimeLinter：
- 进入 Preferences → Package Settings → SublimeLinter → Settings
- 确认
"linters"中包含 eslint 路径，通常自动识别 - 保存文件时即可看到错误或警告提示
4. 配置构建系统（可选）
如果想在 Sublime 内运行 npm 命令（如启动 React 项目），可添加自定义构建系统：
- 菜单栏选择 Tools → Build System → New Build System
- 输入以下内容并保存为
npm_start.sublime-build：
{
"cmd": ["npm", "start"],
"working_dir": "$project_path",
"shell": true,
"encoding": "utf-8"
}
之后可通过 Tools → Build With 选择该任务运行项目。
5. 推荐设置优化体验
在 Preferences → Settings 中添加以下配置：
{
"tab_size": 2,
"translate_tabs_to_spaces": true,
"auto_complete_triggers": [ {"selector": "source.js", "characters": ".<"} ],
"draw_white_space": "all"
}
提升 React 开发时的缩进一致性与代码提示体验。
基本上就这些。Sublime 搭配 Babel + ESLint 能满足基础 React 编码需求，轻量且响应快。虽不如现代编辑器智能，但对熟悉快捷键的开发者依然高效。
