必须安装babel插件并手动绑定.jsx文件到javascript (babel)语法，否则jsx标签、{}插值、classname均灰显或报错；路径需与browse packages中插件文件夹名严格一致，且须通过open all with current extension as…启用babel选项。
Sublime Text 本身不识别 JSX，装了插件也不自动生效——必须手动绑定语法、校验作用域、处理插件冲突，否则 <div> 灰显、<code>{count} 报错、className="" 双引号不配对都是常态。
怎么确认 Babel 插件装对了且路径正确
装完插件后，Packages/Babel/JavaScript (Babel).sublime-syntax 这个路径必须真实存在，否则语法切换会失败。常见错误是插件名实际叫 babel-sublime 或 Babel（大小写敏感），导致路径变成 Packages/babel-sublime/... 或 Packages/Babel/...。
- 打开菜单 Preferences → Browse Packages…，进对应文件夹，看是否存在
JavaScript (Babel).sublime-syntax文件 - 如果只有
JavaScript.sublime-syntax，说明装的是旧版或错包，卸载重装：用Cmd+Shift+P/Ctrl+Shift+P输入Package Control: Install Package，搜Babel，认准 GitHub 仓库为babel-sublime或作者为sublimetext-plugins - 路径写错会导致
Syntax Specific配置无效，右下角仍显示Plain Text或JavaScript
为什么 .jsx 文件点右下角没 “Babel → JavaScript (Babel)” 选项
不是插件没装，而是 Sublime 没把 .jsx 扩展名注册进语法列表。它只在你**已打开该类型文件**的前提下，才把对应语法加进右下角菜单。
- 先新建一个空文件，保存为
App.jsx - 再点击右下角语法名 →
Open all with current extension as…→ 此时才会出现Babel → JavaScript (Babel) - 若仍不显示，检查是否被其他插件劫持：禁用
ReactJS、ES6 Syntax、JS Custom等旧包，它们会覆盖语法定义权 - 别指望
.js文件里写 JSX 就能高亮——除非你显式把.js也加进extensions白名单
Emmet 在 JSX 里 Tab 不展开？改 syntax_scopes
Emmet 默认只响应 text.html.basic 作用域，而 JSX 文件语法设成 JavaScript (Babel) 后，作用域是 source.jsx，完全不匹配。
- 进 Preferences → Package Settings → Emmet → Settings – User
- 加这行：
"syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]} - 保存后重启 Sublime，
div.container+Tab就能生成带className的标签了 - 注意：如果用了 TypeScript + JSX（
.tsx），还得额外加source.tsx，否则div展开后属性名仍是class而非className
JSX 标红但终端跑 ESLint 没问题？解析器错了
SublimeLinter-eslint 默认用 espree 解析器，它不认识 <div>，所以整行标红。这不是高亮问题，是 lint 工具根本没正确加载 Babel 解析规则。
<ul>
<li>确认已安装 <code>SublimeLinter 和 SublimeLinter-eslint
linters 下加："eslint": {"args": ["--parser", "@babel/eslint-parser"]}
@babel/eslint-parser 和 eslint-plugin-react：npm install --save-dev @babel/eslint-parser eslint-plugin-react
babel-eslint，它在 ST4 下会报 Cannot read property 'range' of null
最常被忽略的是：Sublime 不解析 import 或 JSX 编译逻辑，所以没有 props 提示、无跳转、无类型推导——它只是渲染你写的文本，不是运行代码。高亮对了，不代表它“懂” React。
