必须安装babel插件并手动设置语法为“babel → javascript (babel)”才能正确高亮.jsx文件；标红多因sublimelinter-eslint未配置jsx解析器，建议禁用或改用vs code。
Sublime Text 能写 React，但默认完全不认识 JSX —— 不装插件、不手动绑定语法，return <div></div> 会整行灰掉或标红，{count} 插值不着色，className="" 双引号不配对高亮，这不是你写错了，是编辑器根本没加载 JSX 解析规则。
装 Babel 插件并确认路径是否匹配
Babel 插件（作者 babel-sublime）是目前唯一持续维护、兼容 ES2020+ 和 JSX 的语法包。别选已停更的 ReactJS 或 JSX Syntax Highlighting，它们在 Sublime Text 4 下基本失效，且会导致折叠错乱、括号失配。
安装后必须验证路径是否正确，因为 syntax 配置里写的路径一旦错一个字母就失效：
- 用
Preferences → Browse Packages打开插件目录，确认文件夹名是babel-sublime还是Babel（大小写敏感） - 如果文件夹叫
babel-sublime，那语法路径应为Packages/babel-sublime/JavaScript (Babel).sublime-syntax - 如果文件夹叫
Babel，路径就是Packages/Babel/JavaScript (Babel).sublime-syntax - 路径错误时，
.jsx文件右下角仍显示Plain Text或原生JavaScript，高亮不会生效
让 .jsx 和 .js 文件自动用 Babel 语法
只靠点右下角切换语法太累，而且容易漏；真正要的是打开即生效。关键不是全局改默认，而是按扩展名做精准绑定：
- 打开任意
.jsx文件 →Preferences → Settings – Syntax Specific - 在右侧 JSON 中加一行：
"syntax": "Packages/babel-sublime/JavaScript (Babel).sublime-syntax"（注意路径大小写） - 想让
.js文件也走 Babel（比如 hooks、函数组件写在utils.js里），就新建一个空的.js文件，同样进Settings – Syntax Specific，填：{ "extensions": ["js"], "syntax": "Packages/babel-sublime/JavaScript (Babel).sublime-syntax" } - 不要把
.js和.jsx绑定混在一个配置里——Sublime 不支持数组式extensions在 Syntax Specific 设置中生效
Emmet 在 JSX 里不触发？改作用域映射
Emmet 默认只响应 text.html.basic 作用域，而 Babel 插件给 .jsx 设的是 source.jsx，所以 div.container+Tab 没反应，不是 Emmet 坏了，是它压根没被激活。
解决办法是告诉 Emmet：在 source.jsx 里也启用 HTML 行为：
- 菜单栏 →
Preferences → Package Settings → Emmet → Settings - 在右侧加：
"syntax_scopes": { "jsx": "source.jsx" } - 保存后重启 Sublime，
div+Tab就能生成<div></div>，ul>li*3+Tab也能展开列表 - 别动
html或xml的原有映射，否则会影响普通 HTML 文件
JSX 标红但代码没错？检查 ESLint 解析器
常见现象：return <div>{item.name}</div> 在 Sublime 里标红，报 Unexpected token '，但终端跑 <code>eslint 没问题 —— 这说明 SublimeLinter-eslint 用的是默认 espree 解析器，它根本不认识 JSX。
修复方式不是换插件，而是强制指定解析器：
- 进
Preferences → Package Settings → SublimeLinter → Settings – User - 在
linters下添加："eslint": { "args": ["--parser", "@babel/eslint-parser"] } - 确保项目里已安装：
npm install --save-dev @babel/eslint-parser eslint-plugin-react - 注意：
babel-eslint已废弃，别用；@babel/eslint-parser在 SublimeLinter 中兼容性有限，若频繁崩溃，建议只在终端 lint，Sublime 专注高亮
最易被忽略的一点：所有配置都依赖「语法绑定」这个动作，而不是插件安装本身。哪怕你装了十个插件，只要 .jsx 文件右下角没显示 JavaScript (Babel)，其他功能全白搭。每次新建项目，第一件事不是写代码，是打开一个 .jsx 文件，点右下角确认语法对不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
