必须安装作者为babel-sublime的Babel插件并手动绑定.jsx文件语法为JavaScript (Babel)，否则JSX标签、{}插值、className均不高亮；装错插件或未绑定语法会导致白底黑字、引号不配对、折叠异常等问题。
装错插件名或作者，JSX根本不会高亮
不是搜到“Babel”就点安装——Sublime里叫Babel的插件有好几个，但只有作者是babel-sublime、GitHub仓库为babel/babel-sublime的那个才真正同步Babel解析器规则。装错比如Babel Snippets或已停更的ReactJS，会导致{count}白底、className=""引号不配对、标签全灰，甚至括号折叠异常。
确认方式很直接：
- 用
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板 - 输入
Package Control: Install Package→ 回车 → 搜索Babel - 只选作者栏明确写着
babel-sublime的那一项 - 装完后进
Preferences → Browse Packages…，看文件夹名是Babel还是babel-sublime（大小写敏感）
.jsx文件右下角还是Plain Text？手动绑定语法路径
Sublime默认根本不认.jsx后缀，Babel插件也不会自动接管。哪怕插件装对了，没这一步，<div classname="app"></div>照样白底黑字。
可靠做法分两步：
- 打开一个
App.jsx文件 → 右下角点击当前语法名（如显示Plain Text）→ 选Open all with current extension as…→ 找到并选择Babel → JavaScript (Babel) - 更稳定的方式：打开任意
.jsx文件 →Preferences → Settings – Syntax Specific→ 在右侧JSON中加一行："syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"（注意路径必须和Browse Packages里实际文件夹名完全一致，比如是babel-sublime就得写Packages/babel-sublime/...）
别在这里加"extensions"字段——那是全局设置，会把.js文件也拖下水，导致普通脚本高亮错乱。
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
Emmet在JSX里Tab不展开？改syntax_scopes
Emmet默认只响应source.js和text.html.basic作用域，而Babel启用后，JSX文件的作用域是source.jsx，完全不匹配，所以div.container按Tab毫无反应。
解决方法：
- 菜单栏 →
Preferences → Package Settings → Emmet → Settings – User - 在用户设置JSON中添加：
"syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]} - 保存后，用
Ctrl+Shift+P→ 输入Package Control: Rel（补全“Reload”）重启Emmet
为什么{user.name}还是灰的，或者报Unexpected token
这是两个独立问题，混在一起排查只会绕弯：
-
{user.name}灰/白 → 不是ESLint的事，是语法高亮失效：检查右下角是否真显示Babel → JavaScript (Babel)；新建未保存文件、扩展名不是.jsx、Syntax Specific配置路径写错，都会导致这个现象 -
Unexpected token报错 → 大概率是SublimeLinter-eslint在运行，但它默认用旧版babel-eslint解析器，不认识JSX。删掉项目根目录.eslintrc.js里的parser: "babel-eslint"，换成parser: "@babel/eslint-parser"，并确保已安装对应包
真正容易被忽略的是：Babel插件只管渲染，不管逻辑。它不会提醒你key缺失、setState异步陷阱，也不会帮你跳转到useEffect定义处——这些得靠ESLint规则和人盯。
