Sublime Text无法配置出完整React开发环境，仅能实现JSX高亮、基础补全及外部工具联动；必须安装Babel插件（作者babel-sublime）并手动绑定.jsx文件到JavaScript (Babel)语法，否则JSX标签、属性和插值无法正确高亮。
Sublime Text 不能“配置出 React 开发环境”，它只能配出 JSX 高亮 + 基础补全 + 外部工具联动——别把它当 IDE 用，否则会反复踩坑。
装 Babel 插件是唯一靠谱起点
别搜“React 插件”或“JSX 高亮”，那些基本都停更了。Babel 插件（作者 babel-sublime）是目前唯一持续维护、支持 ES2020+、JSX、??=、import type 的语法定义方案。
- 用
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS）呼出命令面板，输入Package Control: Install Package，搜Babel，认准 GitHub 仓库地址是https://github.com/babel/babel-sublime - 装完后打开一个
App.jsx，右下角点语法名 →Open all with current extension as…→ 选Babel → JavaScript (Babel) - 如果没看到这个选项，说明插件根本没装对，重装；如果点了没反应，检查
Preferences → Browse Packages里有没有Babel文件夹
.jsx 文件不自动高亮？Syntax Specific 必须写对
手动切一次语法 ≠ 所有 .jsx 文件永久生效。Sublime 不会自动把扩展名和语法绑定，必须显式声明。
- 打开任意
.jsx文件，菜单栏Preferences → Settings – Syntax Specific - 右侧 JSON 中只加这一行：
"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax" - 注意路径必须完全匹配：进
Browse Packages看插件文件夹名是Babel还是babel-sublime，路径错了就白配 - 别往这里加
"extensions"字段——那是全局默认设置，会把.js文件也拖下水，导致普通脚本高亮错乱
Emmet 在 JSX 里不展开？改 syntax_scopes 才生效
敲 div.container + Tab 没反应，不是 Emmet 坏了，是它根本没识别当前文件为可展开的 JS 上下文。
立即学习“前端免费学习笔记（深入）”；
- 菜单栏
Preferences → Package Settings → Emmet → Settings，打开用户设置 - 加这段：
"syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]} - 保存后重启 Sublime 或执行
Cmd+Shift+P → Emmet: Reload - 验证：在
return (后输入ul>li*3+Tab，应生成完整列表结构；{}里的 JS 表达式 Emmet 不管
标红 <div> 或 {item.name}？这不是高亮问题
红色下划线来自 SublimeLinter-eslint，不是 Babel 没起作用。Babel 只管怎么显示，不管对错。
- 先确认是否真装了
SublimeLinter和SublimeLinter-eslint：看Preferences → Package Settings里有没有这两项 - 如果只是想写代码不校验，直接卸载它们——比调配置省心十倍
- 如果必须保留，进
SublimeLinter → Settings（User），加："linters": {"eslint": {"args": ["--parser", "@babel/eslint-parser"]}} - 注意：
babel-eslint已废弃，@babel/eslint-parser在 SublimeLinter 中兼容性差；真要稳定 lint，换 VS Code
最常被忽略的一点：Sublime 不解析 import、不读 node_modules、不知道 useState 是什么。它不会帮你发现 key 缺失、setState 异步陷阱，也不会跳转到 React 源码——这些得靠 ESLint 规则、浏览器 DevTools 和人盯。
