Sublime需安装Babel插件以支持JSX高亮和ES6+语法，配置语法映射使.js等文件默认使用JavaScript (Babel)，再搭配Emmet和AutoFileName提升效率，但无法实现类型检查等IDE功能。
Sublime 安装 Babel 插件支持 JSX 语法高亮
Sublime 原生不识别 .jsx 文件和现代 React 语法（如箭头函数、解构、JSX 标签），直接打开会丢失高亮甚至报错。最稳定、广泛使用的方案是安装 Babel 插件，它不是简单加个语法定义，而是完整覆盖 ES6+ 和 JSX 的词法解析。
操作步骤：
- 通过
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）调出命令面板 - 输入
Package Control: Install Package并回车 - 搜索
Babel，选择并安装（作者是sublimehq或babel-sublime，认准 GitHub stars 高、更新活跃的版本） - 安装完成后，打开任意
.jsx文件，右下角语法栏点击，选择Babel → JavaScript (Babel)
注意：不要选 “JavaScript” 原生语法，它对 {} 内嵌表达式和自闭合标签（如 <div></div>）支持极差；也不要用已停更的 ReactJS 插件，它在 Sublime Text 4 下基本失效。
让 .js 文件也自动用 Babel 语法（避免手动切换）
React 项目里很多逻辑写在 .js 文件中（比如 hooks、组件导出），但默认打开仍是原生 JavaScript 语法，JSX 高亮不会生效。必须显式配置文件关联规则。
方法是修改用户语法映射：
- 菜单栏 →
Preferences → Settings – Syntax Specific - 在右侧窗口中添加：
{ "extensions": ["js", "jsx", "ts", "tsx"], "syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax" } - 保存后，所有
.js文件都会默认使用 Babel 语法，无需每次手动点右下角
⚠️ 警告：路径中的 Packages/Babel/... 必须完全匹配你安装的 Babel 插件实际路径；如果插件名是 babel-sublime，路径可能是 Packages/babel-sublime/...，可去 Preferences → Browse Packages 里确认文件夹名。
补全 JSX 标签名和 props 的实用插件
仅靠 Babel 只解决高亮，没有智能补全。React 开发中频繁敲 <button size="sm" onclick="{...}"></button> 这类结构，手写效率低还易拼错。推荐两个轻量插件协同使用：
-
Emmet：Sublime 自带，启用后在 JSX 中输入div.myclass+Tab就能生成<div classname="myclass"></div>；输入ul>li*3+Tab生成列表结构 -
AutoFileName：安装后，在import或require中输入引号，会自动列出当前目录下的文件路径，支持.jsx、.ts等扩展名
这两个插件都不依赖 Node.js 或语言服务器，启动快、无卡顿，比重型 LSP 方案更适合 Sublime 的定位。
别指望 Sublime 做类型检查或实时错误提示
Sublime 是编辑器，不是 IDE。即使装了 Babel 和 Emmet，它也不会：
- 检测
useState在条件语句中调用（违反 Hooks 规则） - 标红未定义的 prop 类型（如
props.childrens拼错） - 跳转到自定义 Hook 的定义处（
Ctrl+Click失效）
这些能力需要 typescript-language-server 或 eslint-plugin-react 配合 LSP 插件，但 Sublime 上配置复杂、稳定性差，容易拖慢响应。真需要这些，不如切到 VS Code；如果只图轻快写组件、看结构、快速改样式，Sublime + Babel + Emmet 组合已经足够干净利落。
最常被忽略的一点：每次更新 Sublime Text 后，Babel 插件可能被禁用，记得检查 Preferences → Package Settings → Babel 是否存在，以及右下角语法是否仍为 JavaScript (Babel)。
