安装Package Control后，通过命令面板安装Babel插件并设置语法模式为javaScript (Babel)，可实现jsX高亮；2. 可选配置默认文件关联与Emmet、ESLint等插件提升开发体验；3. 创建jsx文件验证标签、属性等高亮正常，即完成react开发环境配置。

要让sublime Text支持React开发，特别是JSX语法高亮和代码提示，需要进行一些基础配置。虽然Sublime不像vs code那样开箱即用，但通过安装合适的插件和设置语法模式，完全可以打造一个轻量高效的React开发环境。

1. 安装Package Control（如果尚未安装）

Package Control是sublime text的插件管理工具，几乎所有功能扩展都依赖它。

按下 Ctrl+`（或通过 View > Show console），粘贴以下代码运行：

import urllib.request,os,hashlib; exec(urllib.request.urlopen(‘https://packagecontrol.io/installation’).read().decode(‘utf-8’))

2. 安装Babel插件（推荐用于JSX高亮）

Babel插件能提供完整的es6+和React JSX语法高亮支持。

• 按下 Ctrl+Shift+P 打开命令面板
• 输入 “Install Package”，选择 “Package Control: Install Package”
• 搜索并安装 Babel

安装完成后，打开一个 .js 或 .jsx 文件，点击右下角显示的语法模式（如“javascript”），选择：
Babel → JavaScript (Babel)
这样JSX代码就会正确高亮显示。

3. 设置默认语法关联（可选）

避免每次手动切换语法，可以将 .js 和 .jsx 文件默认用Babel语法打开。

• 打开一个 .jsx 文件，设置语法为 “JavaScript (Babel)”
• 进入菜单：View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel)

此后所有同类型文件都会自动使用Babel语法高亮。

Napkin AI

Napkin ai 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

2238

查看详情

4. 其他增强插件（可选）

提升React开发体验的辅助插件：

• Emmet：支持JSX中的快速标签补全，比如输入 div.my-class 按 Tab 自动生成标签。
• ESLint：集成ESLint，实时检查代码规范。
• AutoFileName：自动补全文件路径，导入组件时更方便。

5. 验证JSX高亮是否生效

创建一个 test.jsx 文件，输入以下代码：

const MyComponent = () => {
  return (
    

  );
};

如果标签、属性、大括号等颜色区分清晰，说明JSX高亮已成功配置。

基本上就这些。Sublime Text虽轻量，但配合Babel插件完全胜任React基础开发。关键是把语法切换到JavaScript (Babel)，不然JSX会解析异常。不复杂但容易忽略。