配置Sublime Text支持React开发需安装ReactJS、Emmet和Babel插件，设置JavaScript (Babel)为默认语法，并在Emmet配置中添加"emmet.includeLanguages": {"javascript": "jsx"}以启用JSX补全，从而实现高效开发。
Sublime Text 虽然轻量，但通过合理配置完全可以成为高效的 React 开发工具。重点在于解决 JSX 语法高亮和 Emmet 补全这两个核心需求。下面一步步教你如何设置一个适合 React（JSX）开发的 Sublime 环境。
安装必要的插件
打开 Sublime Text，使用 Package Control 安装以下插件：
- ReactJS：提供对 .js 和 .jsx 文件的 JSX 语法高亮支持。
- Emmet：大幅提升 HTML/JSX 编写效率，支持标签自动补全。
- Babel（可选但推荐）：比默认的 JavaScript 语法更现代，对 ES6+ 和 JSX 支持更好。
提示：按 Ctrl+Shift+P 打开命令面板，输入 "Install Package" 即可搜索并安装上述插件。
设置 JSX 语法高亮
安装完成后，需要确保 .js 或 .jsx 文件正确识别为支持 JSX 的语法。
- 打开一个 .js 文件，点击右下角显示的语法类型（通常是 "JavaScript"）。
- 选择 Babel → JavaScript (Babel) 或 ReactJS → JavaScript React。
- 这样 JSX 代码中的 HTML 标签、花括号表达式等都会被正确高亮。
启用 Emmet 在 JSX 中的补全
默认情况下，Emmet 可能无法在 JSX 的标签部分生效。需要手动开启。
- 进入菜单 Preferences → Package Settings → Emmet → Settings - User。
- 添加如下配置：
{
"emmet.includeLanguages": {
"javascript": "jsx",
"typescriptreact": "jsx",
"vue": "html"
}
}
保存后，在 .js 文件的 return() 中输入 div.my-class，然后按 Tab，就会生成 ，注意 class 自动转为 className，这是 React 的要求。
提升开发体验的小技巧
- 使用 Ctrl+D 多光标选择，快速修改多个相同变量。
- 安装 AutoFileName 插件，引入组件时自动补全路径。
- 搭配 ESLint 插件（如 SublimeLinter-eslint）实现实时语法检查。
基本上就这些。不复杂但容易忽略的是 Emmet 的 includeLanguages 配置。一旦设置完成，Sublime 就能流畅编写 JSX，保持轻快的同时具备现代编辑器的核心功能。
