babel插件需手动绑定.jsx语法路径，且路径大小写必须与文件夹名完全一致；装错作者非babel-sublime的插件会导致高亮失效或崩溃；{count}不着色是语法未正确加载，unexpected token

装了 Babel 插件但 .jsx 文件还是白底黑字、{user.name} 不着色、<div></div> 整行标红？不是你代码错了，是 Sublime 根本没把文件当 JSX 解析——Babel 插件不会自动接管扩展名，必须手动绑定语法路径，且路径大小写错一个字母就失效。

怎么确认 Babel 插件装对了、路径能用

Babel 插件只认作者为 babel-sublime 的那个（GitHub 仓库 babel/babel-sublime），别选“Babel Sublime”“ReactJS”或已停更的“JSX Syntax Highlighting”。装错会导致语法定义加载失败、括号失配甚至崩溃。

• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）→ 输入 Package Control: Install Package → 搜索 Babel → 点安装，看作者栏是否显示 babel-sublime
• 装完后，菜单 → 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 或标红

根本原因：Sublime 默认不解析 .jsx，Babel 插件装完也不会自动绑定扩展名。右下角显示 Plain Text 或 JavaScript 就说明它压根没加载 JSX 规则。

react design

将 Learn Social Studies 品牌系统应用于 React 界面，采用 CSS 变量、可复用组件规范，默认浅色主题并支持深色主题。

下载

• 打开任意 App.jsx 文件 → 右下角点击当前语法名（比如显示 JavaScript）→ 选 Open all with current extension as… → Babel → JavaScript (Babel)
• 想一劳永逸：打开一个 .jsx 文件 → Preferences → Settings – Syntax Specific → 在右侧 JSON 中加一行："syntax": "Packages/babel-sublime/JavaScript (Babel).sublime-syntax"（注意路径大小写）
• ⚠️ 切记：只对 .jsx 单独配，别全局改默认语法；混用 .js 和 .jsx 的项目，全局改会导致普通 JS 文件高亮异常

为什么 {count} 还是白的，或者报 Unexpected token

这是两个独立问题：{count} 白/灰是语法高亮失效，Unexpected token 是校验器在报错，不是 Babel 的事。

• {count} 白/灰 → 检查是否误入 Plain Text 模式：新建未保存文件、扩展名不是 .jsx 或 .js、右下角语法没切对都会导致
• Unexpected token 报错 → 大概率是 <code>SublimeLinter-eslint 在运行，但它默认用的是旧版 babel-eslint 解析器，不认识 JSX。建议卸载该插件，或确保项目有 .eslintrc.js 并配置 @babel/eslint-parser
• 别指望 Babel 提供补全或跳转——它只管渲染，useState 补全、组件名跳转得靠 ReactJS Snippets 或 SublimeCodeIntel，实际效果有限

最易被忽略的点：路径大小写和文件夹名必须完全一致，Packages/Babel/ 和 Packages/babel-sublime/ 是两个不同路径；另外，Preferences → Settings – Syntax Specific 配置只对当前文件类型生效，不能跨扩展名复用，.js 和 .jsx 得分别配。