sublime Text 需安装 Babel 插件实现 jsX 语法高亮,再安装 ES7+ react/Redux/React-Native snippets 提供组件、Hooks 等自动补全,若用 typescript 则额外安装 TypeScript 插件以支持类型提示与智能提示。

sublime text 默认不支持 JSX 语法高亮和 React 相关的自动补全,需要手动安装插件并配置。核心是两件事:让 Sublime 正确识别 .jsx 或 .js 文件中的 JSX 语法(高亮),以及提供组件、props、Hooks 等智能补全(需额外插件或设置)。
安装 Babel 插件(推荐:语法高亮 + 基础 JSX 支持)
Babel 是目前 Sublime 上对 JSX 支持最稳定、更新最及时的语法包,能正确高亮 JSX 标签、表达式、Fragment、新特性(如 、useEffect 等)。
- 打开 Command Palette(Ctrl+Shift+P / Cmd+Shift+P),输入 Install Package,回车后选择 Package Control: Install Package
- 搜索并安装 Babel(作者:dabbler0)
- 安装完成后,打开一个
.jsx文件 → 右下角点击当前语法(如 “javaScript”)→ 选择 Babel → javascript (Babel) - 为永久生效:菜单栏 Preferences → Settings – Syntax Specific,在右侧配置中加入:
"syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"
关联 .js 文件也使用 JSX 高亮(可选但实用)
很多 React 项目仍用 .js 后缀写 JSX(尤其 CRA 默认)。需让 Sublime 对 .js 文件也启用 Babel 语法:
- 菜单栏 View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel)
- 或更彻底:在 Preferences → Settings – Syntax Specific 中(确保当前是 JS 文件),添加:
"extensions": ["js", "jsx", "tsx"](注意:这是语法文件自身的设置,不是全局设置)
添加自动补全支持(ES7+ React/Redux/React-Native snippets)
这个插件提供常用 React 代码片段,比如 imrc → import React + Component,ccf → class component with constructor & render,rfc → functional component 等。
- 通过 Package Control 安装插件:ES7+ React/Redux/React-Native/JS snippets(作者:dsznajder)
- 安装后无需额外配置,新建文件并设为 JavaScript (Babel) 语法即可触发补全
- 常用快捷键示例:
rfc+ Tab → 函数组件骨架clg+ Tab →console.log()imp+ Tab →import {} from ''usee+ Tab →useEffect(() => {}, [])
进阶:启用 TypeScript + JSX 补全(如用 .tsx)
若项目使用 TypeScript,建议再安装:TypeScript(官方插件,支持 TS 语言服务 + JSX 智能提示)
- 安装 TypeScript 插件(由 microsoft 维护)
- 确保项目根目录有
tsconfig.json,插件会自动启用语言服务器 - 打开
.tsx文件 → 右下角选 TypeScriptReact 语法 → 即可获得 props 类型提示、组件跳转、错误检查等
基本上就这些。Babel 解决高亮,ES7 snippets 解决常用模板补全,TypeScript 插件覆盖类型场景 —— 三者搭配,Sublime 就能很顺手地写 React 了。