Sublime怎么配置React开发环境_Sublime支持JSX语法高亮教程

能，但必须装 Babel 插件并手动把 .jsx 文件绑定到 JavaScript (Babel) 语法，否则所有 JSX 标签、{} 插值、属性名都会灰掉或报错——这不是配置漏了，是 Sublime 默认根本不认识 JSX。

为什么装了插件还是不亮？检查三个硬性条件

常见症状：文件是 App.jsx，右下角显示 Plain Text 或 JavaScript，<div> 没颜色、<code>className="" 双引号不配对、{count > 0 ? <span></span> : null} 整块变白。扩展名必须是 .jsx（或 .tsx，但需另配）；.js 文件即使内容含 JSX，Babel 默认不接管没手动切换语法：点右下角 → Open all with current extension as… → 选 Babel → JavaScript (Babel)装了冲突插件：如 ReactJS、ES6 Syntax 等旧包，会抢语法定义权，直接卸载

怎么让 .jsx 文件自动用 Babel 语法？Syntax Specific 配置

每次打开都点右下角太累。正确做法是给 .jsx 单独写一条语法绑定规则，不影响 .js 文件。

打开任意 .jsx 文件，菜单栏 Preferences → Settings – Syntax Specific在弹出的 JSON 里加这行："syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"保存后，所有新打开的 .jsx 文件自动生效，不用再点别全局改默认语法——混用 .js 和 .jsx 的项目，全局改会导致普通 JS 文件高亮错乱

Emmet 在 JSX 里不生效？改 syntax_scopes 配置

默认 Emmet 只认 HTML 或 XML 作用域，JSX 是 source.jsx，不匹配就触发不了 div.container → Tab。

菜单栏 Preferences → Package Settings → Emmet → Settings用户设置里加："syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]}注意：Emmet 只补标签结构，{} 里的 JS 表达式它不管如果用了 TypeScript + JSX（.tsx），Babel 不支持，得换 TypeScript-TmLanguage 插件

别指望 Babel 提供补全、跳转或类型检查

Babel 插件只干一件事：让 Sublime 正确渲染语法。它不解析 import、不读 node_modules、不知道 useState 是什么。

函数组件骨架靠 snippet：输入 rfc + Tab（来自 ReactJS Snippets 插件，和语法高亮无关）补全 useEffect 这类 Hooks，得自己建 snippet 或用 AutoFileName，别装 JS Custom——它和 Babel 冲突，会导致闭合标签错位ESLint 报错要靠 SublimeLinter-eslint，且项目根目录必须有 .eslintrc.js 并启用 react/react-in-jsx-scope 规则最常被忽略的一点：Sublime 不知道 key 缺失、setState 异步陷阱、甚至 React.createElement 调用链——它只是个带高亮的文本编辑器