Sublime Text需手动关联语法以支持.jsx和.tsx高亮：安装Babel插件实现.jsx的React语法高亮，安装TSJSX或Typescript React插件实现.tsx的TypeScript+JSX混合高亮，并避免插件冲突与缓存问题。
Sublime Text 默认不识别 .jsx 和 .tsx 文件的语法高亮，必须手动关联语法定义，否则会显示为纯文本或错误的 JavaScript 高亮。
如何让 .jsx 文件正确高亮
Sublime 不会自动将 .jsx 视为 React 语法，需手动设置文件关联：
- 打开任意
.jsx文件 → 点击右下角当前语法名称（如 “Plain Text”）→ 选择 Open all with current extension as… → 找到并选择JavaScript (Babel)或React JSX（取决于已安装插件） - 若没有
React JSX选项，说明未安装支持 JSX 的语法包；推荐安装Package Control后搜索安装Babel插件（它提供更准确的 JSX/ES2015+ 支持） - 安装
Babel后，.jsx文件默认会使用Babel → JavaScript (Babel)语法，支持 JSX 标签、属性展开、Fragment 等高亮
如何让 .tsx 文件获得 TypeScript + JSX 混合高亮
.tsx 是 TypeScript 的 JSX 文件，普通 TypeScript 语法包不支持 JSX 解析，必须用专门的语法定义：
- 确保已安装
Typescript React插件（通过 Package Control 安装，作者是OnePath）或TSJSX（轻量替代） - 安装后，打开
.tsx文件 → 右下角点击语法名 → 选择TSJSX或TypeScriptReact（注意大小写和空格） - 若仍显示为普通
TypeScript，检查是否被用户设置覆盖：打开Preferences → Settings – User，确认没有硬编码"extensions": ["ts"]覆盖了.tsx
常见高亮失效原因与修复
即使装了插件，高亮仍可能异常，多数由以下原因导致：
- 多个语法插件冲突：例如同时安装了
Babel、React Syntax Highlighting、TSJSX，它们可能注册了相同扩展名，导致 Sublime 随机选用一个 → 卸载非主力插件，保留一个（推荐Babel+TSJSX组合） - 文件已缓存旧语法：关闭文件 →
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）→ 输入Set Syntax: JavaScript (Babel)→ 回车，再重新保存文件 - 项目级设置干扰：检查项目根目录是否有
.sublime-project，其中"syntax_override": [...]可能强制设为其他语法 → 删除或修正该字段
{
"folders": [
{
"path": "."
}
],
"settings": {
"tab_size": 2,
"translate_tabs_to_spaces": true
},
"syntax_override": [
["\.js$", "Packages/JavaScript/JavaScript.sublime-syntax"]
]
}
语法高亮依赖的是“当前视图绑定的语法定义”，而不是文件后缀本身；一旦绑定错误，即使改后缀也不会自动纠正。最稳妥的做法是每次新建 .jsx 或 .tsx 文件后，手动点右下角选一次正确语法，并勾选 “Open all with current extension as…”。
