使用 sublime text 开发 react 项目需要手动配置插件和环境，但依然高效轻量。1. 安装必要插件：babel（jsx语法高亮）、eslint（代码规范）、prettier（可选格式化）、packageresourceviewer（修改插件配置）。2. 配置语法识别：通过 babel 支持 jsx 文件，并设置默认 .js 文件使用 babel 语法。3. 设置 eslint 实时校验：确保项目根目录有 eslint 配置文件，并在 sublime 中配置 node 路径与校验扩展名。4. 利用快速跳转与自定义代码片段提升效率：如使用 ctrl+p 快速打开文件、rfc + tab 生成组件模板、自定义缩写简化 import 等常用代码。只要配置得当，sublime text 可以胜任日常 react 开发任务。
用 Sublime Text 写 React 项目，其实并不像 VS Code 那样开箱即用，但只要配置得当，Sublime 同样可以成为高效、轻量的开发工具。关键在于合适的插件搭配和环境设置。
安装必要插件：让 Sublime 支持 React 开发
Sublime 本身对 JSX 和现代 JavaScript 的支持有限，需要依赖插件来补足。以下几款插件几乎是标配：
- Babel：提供 React/JSX 的语法高亮
- ESLint：代码规范检查（配合项目中的 ESLint 配置）
- Prettier（可选）：格式化代码，保持风格统一
- PackageResourceViewer：方便查看或修改插件自带配置
安装方式很简单，先确保你已经安装了 Package Control，然后在命令面板（Ctrl+Shift+P）中搜索插件名并安装即可。
立即学习“前端免费学习笔记（深入）”；
配置语法识别：正确显示 JSX 文件
默认情况下，.js 文件使用的是 JavaScript 语法模式，但如果你的 React 组件用了 .jsx 扩展名或者混写了 JSX，建议切换到 Babel 提供的语法模式：
- 打开一个
.jsx或包含 JSX 的文件 - 点击右下角的“JavaScript” → 选择
Babel/JavaScript (Babel)
这样就能获得更准确的高亮和语法提示。
如果你想一劳永逸地为所有 .js 文件都应用 Babel 语法（尤其适用于 React 项目），可以在用户配置中添加如下内容：
{
"extensions": ["js"],
"syntax": "Packages/Babel/JavaScript.sublime-syntax"
}设置 ESLint 实时校验：避免低级错误
如果你的 React 项目已经集成了 ESLint，可以通过配置让 Sublime 显示实时错误提示：
- 先确保项目根目录有
.eslintrc.js或.eslintrc.json - 安装完 ESLint 插件后，在菜单栏进入
Preferences > Package Settings > Linter > Settings - 在
User配置里设置你的 Node 路径（如果系统没自动识别）
{
"linters": {
"eslint": {
"args": ["--ext", ".js,.jsx"]
}
}
}这样每次保存文件时，ESLint 就会自动运行，并在问题处显示标记，非常实用。
快速跳转与代码片段：提升编码效率的小技巧
React 开发中经常要创建组件、导入导出模块，手动敲这些模板很费时间。Sublime 可以通过快捷键和自定义 snippets 提升效率：
常用技巧包括：
- 使用
Goto Anything（Ctrl+P）快速打开文件 - 输入
rfc+ Tab（前提是配置了对应 snippet）生成函数组件模板 - 自定义缩写如
imp展开成import React from 'react'
你可以通过菜单 Tools > Developer > New Snippet... 创建自己的代码片段，比如下面这个简单组件的模板：
<snippet>
<content><![CDATA[
import React from 'react';
const ${1:ComponentName} = () => {
return (
<div>
${2:Hello World}
</div>
);
};
export default ${1};
]]></content>
<tabTrigger>rfc</tabTrigger>
<scope>source.js, source.jsx</scope>
</snippet>基本上就这些配置，虽然不像 VS Code 那么自动化，但 Sublime 胜在轻快、灵活。只要你愿意花点时间搭好基础环境，它完全可以胜任日常的 React 开发工作。
