能,但需装Babel插件并手动设置.jsx文件语法为JavaScript (Babel),再通过Syntax Specific配置自动关联,否则无JSX高亮;Emmet和补全需额外配置,且无React语义级功能。

Sublime Text 能不能直接写 React?
能,但默认不支持 JSX 语法高亮和智能提示——这不是 Sublime 的问题,是它本身不内置前端框架支持,得靠插件补足。别指望装个“React 插件”就万事大吉,很多老教程推荐的 ReactJS 或 ES6 Syntax 插件早已停止维护,装了反而导致 .jsx 文件乱码或高亮失效。
必须装的两个插件:Babel 和 Package Control
核心逻辑很简单:让 Sublime 把 .jsx 当作 ES6+JSX 来解析,而不是普通 JavaScript 或纯 HTML。关键不是“React 插件”,而是“语法定义插件”。
- 先确保已安装
Package Control(没装的话搜官网手动安装,别跳过这步) - 用
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)呼出命令面板,输入Install Package,回车 - 搜
Babel,选中安装(作者是babel-sublime,不是ReactJS) - 装完后,打开任意
.jsx文件,右下角点击语法类型,选Babel → JavaScript (Babel)—— 这步必须手动切,不会自动识别
为什么 JSX 写着写着突然变白了?
常见于文件已打开、再手动切换语法后,或者保存时 Sublime 忘记绑定扩展名。根本原因是 Sublime 没把 .jsx 和 Babel 语法自动关联。
- 解决方法:菜单栏
Preferences → Settings – Syntax Specific - 在弹出的 JSON 配置里加一行:
"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax" - 保存后,所有新打开的
.jsx文件会自动用 Babel 语法,不用再点右下角 - 注意:如果项目里混用
.js和.jsx,别全局改默认语法,只对.jsx做这个设置
写 JSX 还缺什么?自动补全和 Emmet 支持
Babel 解决高亮,但不提供组件名补全或 div>ul>li*3 这种 Emmet 展开。需要额外配置:
- Emmet 默认不支持 JSX,进
Preferences → Package Settings → Emmet → Settings - 在用户设置里加:
"syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]} - 函数名补全靠
SublimeCodeIntel或更轻量的AutoFileName,但别装JS Custom——它和 Babel 冲突,会导致 JSX 标签闭合符错位 - 如果用了 TypeScript + JSX(
.tsx),Babel 不管用,得换TypeScript-TmLanguage插件,并单独配语法映射
最常被忽略的一点:Sublime 不解析 import 或 JSX.createElement,所以没有 props 提示、无跳转、无错误检查——它只是个高级文本编辑器,不是 VS Code。接受这点,配置才不会走偏。









