sublime text需安装babel插件并设为默认语法以支持jsx，因原生javascript语法不识别jsx标签；再配合sublimelinter-eslint与项目级.eslintrc.js实现错误提示。
sublime text 本身不原生支持 JSX，但通过安装插件和正确配置语法定义，可以实现完整的 react 开发体验——包括 JSX 高亮、es6+ 语法识别、自动补全（需额外插件）和错误提示（需搭配外部工具）。关键不是“装个插件就完事”，而是让 Babel 语法成为默认 JS 处理器。
为什么默认 JavaScript 语法不支持 JSX
Sublime 自带的 JavaScript 语法定义（Packages/JavaScript/JavaScript.sublime-syntax）只识别标准 ecmascript 语法，遇到 <div> 这类标签会直接报错或变色异常。JSX 是扩展语法，必须由专门的语法包接管。 <ul><li>现象：写 <code>return (<div>Hello</div>); 时，<div> 被标红，或整行变成纯白色 <li>根本原因：当前文件被识别为 <code>JavaScript，而非 Babel 或 React JSX
Babel 插件，并手动将文件语法切换为 Babel → JavaScript (Babel) 安装 Babel 插件并设为默认语法
Babel 是 Sublime 上最稳定、更新最勤的 JSX 支持方案，它重写了整套语法高亮规则，兼容 ES2020+、JSX、Flow、typescript（基础）。
- 用
Package Control → Install Package搜索并安装Babel - 打开一个
.jsx或.js文件，按Ctrl+Shift+P（windows/linux）或Cmd+Shift+P（macos），输入Set Syntax: Babel，选择Babel → JavaScript (Babel) - 如需对所有
.js文件自动应用：在菜单栏点击View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel) - 注意：
Babel不提供 lint 或自动修复，仅负责语法解析与高亮
配合 ESLint 实现实时错误提示
光有高亮不够，React 开发中常见的拼写错误（如 useStae）、hook 规则违规（在条件中调用 useState）需要 ESLint 检查。Sublime 本身不运行 Node.js，所以必须借助 SublimeLinter + eslint CLI。
- 先全局安装 ESLint 及 React 插件：
npm install -g eslint eslint-plugin-react eslint-plugin-react-hooks - 用
Package Control安装SublimeLinter和SublimeLinter-eslint - 确保
SublimeLinter-eslint能找到你的全局eslint：在Preferences → Package Settings → SublimeLinter → Settings中确认"executable": "eslint"或指定完整路径（如/usr/local/bin/eslint） - 项目根目录下要有
.eslintrc.js，内容至少包含parserOptions: { ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true } }和plugins: ['react', 'react-hooks']
可选增强：Emmet + AutoFileName 提升效率
JSX 写模板时频繁敲标签，Emmet 能大幅减少键盘操作；而引入组件路径时，AutoFileName 可自动补全相对路径。
-
Emmet默认对.js文件不生效，需在Preferences → Package Settings → Emmet → Settings中添加：{ "syntax_scopes": { "javascript": "source.js.jsx" } } -
AutoFileName安装后，默认支持import和require行的路径补全，无需额外配置 - 两者都不影响核心语法，但一旦习惯，删掉就手慢
真正卡住人的往往不是“能不能高亮”，而是文件没被正确识别为 JavaScript (Babel) 语法，或者 SublimeLinter-eslint 找不到项目级的 .eslintrc.js——这两个点漏掉任何一个，都会让你觉得“配了跟没配一样”。