Sublime Text需安装Babel插件实现JSX高亮与React开发支持，配置Emmet语法作用域以启用JSX缩写，并避免使用过时的React Snippets类插件。
Sublime Text 本身不原生支持 JSX 语法高亮和 React 开发辅助，但通过安装插件可以快速补足——关键不是装多少插件，而是装对哪几个、怎么配才不冲突。
安装 Babel 插件替代默认 JavaScript 语法
Sublime 自带的 JavaScript 语法无法正确识别 JSX 标签（比如 <div> 会被当成 HTML），直接启用 <code>JavaScript (Babel) 是最稳妥的方案。它不仅高亮 JSX，还支持 ES6+、TypeScript 和 React Hooks 的语法着色。
- 用
Package Control: Install Package命令搜索并安装Babel - 安装完成后，打开任意
.jsx或.js文件，右下角点击当前语法名 → 选择Babel → JavaScript (Babel) - 如需默认对所有
.js文件启用，可进Preferences → Settings – Syntax Specific，添加：{ "syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax" }
配置 Emmet 支持 JSX 缩写
Emmet 在 JSX 中默认不生效，因为 Sublime 把 JSX 当作 HTML 处理，而 JSX 不是标准 HTML。必须手动关联语法作用域。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 进入
Preferences → Package Settings → Emmet → Settings - 在用户设置中加入：
{ "syntax_scopes": { "javascript": ["source.js", "source.jsx", "source.js.jsx", "source.babel"], "jsx": ["source.js.jsx", "source.jsx", "source.babel"] } } - 保存后，新建
.jsx文件，输入div.my-class+Tab，就能正常展开为<div classname="my-class"></div>
避免安装“React Snippets”类过时机插件
很多老教程推荐的 ReactJS Code Snippets 或 React Snippets 插件，依赖已废弃的 ES6 Syntax，且补全逻辑与 Babel 冲突，容易导致自动补全失效或弹出重复提示。
- 已安装的建议卸载：用
Package Control: Remove Package删除这类插件 - 真正需要的补全是 Babel 自带的（如
rfc+ Tab 生成函数组件）或通过JSX Key Snippets这类轻量插件增强 - 如果非要代码片段，直接编辑
Tools → Developer → New Snippet...，定义一个rfc片段，作用域设为source.babel，更可控
最常被忽略的一点：Babel 插件启用后，Ctrl+Shift+P 输入 Set Syntax: JavaScript (Babel) 可一键切换，但 Sublime 不会记住你对某个文件夹下所有 .js 文件的语法偏好——项目级配置必须靠 Settings – Syntax Specific 手动写死，否则下次打开还是原始 JavaScript 语法。
