Sublime怎么配置React开发环境_Sublime支持JSX语法高亮【全攻略】-sublime-PHP中文网

Sublime Text需安装Babel插件并设为默认语法以支持JSX，因原生JavaScript语法不识别JSX标签；再配合SublimeLinter-eslint与项目级.eslintrc.js实现错误提示。

sublime怎么配置react开发环境_sublime支持jsx语法高亮【全攻略】

Sublime Text 本身不原生支持 JSX，但通过安装插件和正确配置语法定义，可以实现完整的 React 开发体验——包括 JSX 高亮、ES6+ 语法识别、自动补全（需额外插件）和错误提示（需搭配外部工具）。关键不是“装个插件就完事”，而是让 Babel 语法成为默认 JS 处理器。

为什么默认 JavaScript 语法不支持 JSX

Sublime 自带的 JavaScript 语法定义（Packages/JavaScript/JavaScript.sublime-syntax）只识别标准 ECMAScript 语法，遇到 <div> 这类标签会直接报错或变色异常。JSX 是扩展语法，必须由专门的语法包接管。 <ul><li>现象：写 <code>return (<div>Hello</div>); 时，<div> 被标红，或整行变成纯白色 <li>根本原因：当前文件被识别为 <code>JavaScript，而非 Babel 或 React JSX

解决路径：安装 Babel 插件，并手动将文件语法切换为 Babel → JavaScript (Babel)

安装 Babel 插件并设为默认语法

Babel 是 Sublime 上最稳定、更新最勤的 JSX 支持方案，它重写了整套语法高亮规则，兼容 ES2020+、JSX、Flow、TypeScript（基础）。

用 Package Control → Install Package 搜索并安装 Babel
打开一个 .jsx 或 .js 文件，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Set Syntax: Babel，选择 Babel → JavaScript (Babel)
如需对所有 .js 文件自动应用：在菜单栏点击 View → Syntax → Open all with current extension as… → Babel → JavaScript (Babel)
注意：Babel 不提供 lint 或自动修复，仅负责语法解析与高亮

配合 ESLint 实现实时错误提示

光有高亮不够，React 开发中常见的拼写错误（如 useStae）、hook 规则违规（在条件中调用 useState）需要 ESLint 检查。Sublime 本身不运行 Node.js，所以必须借助 SublimeLinter + eslint CLI。

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

先全局安装 ESLint 及 React 插件：npm install -g eslint eslint-plugin-react eslint-plugin-react-hooks
用 Package Control 安装 SublimeLinter 和 SublimeLinter-eslint
确保 SublimeLinter-eslint 能找到你的全局 eslint：在 Preferences → Package Settings → SublimeLinter → Settings 中确认 "executable": "eslint" 或指定完整路径（如 /usr/local/bin/eslint）
项目根目录下要有 .eslintrc.js，内容至少包含 parserOptions: { ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true } } 和 plugins: ['react', 'react-hooks']

可选增强：Emmet + AutoFileName 提升效率

JSX 写模板时频繁敲标签，Emmet 能大幅减少键盘操作；而引入组件路径时，AutoFileName 可自动补全相对路径。

Emmet 默认对 .js 文件不生效，需在 Preferences → Package Settings → Emmet → Settings 中添加：
```
{
  "syntax_scopes": {
    "javascript": "source.js.jsx"
  }
}
```
AutoFileName 安装后，默认支持 import 和 require 行的路径补全，无需额外配置
两者都不影响核心语法，但一旦习惯，删掉就手慢

真正卡住人的往往不是“能不能高亮”，而是文件没被正确识别为 JavaScript (Babel) 语法，或者 SublimeLinter-eslint 找不到项目级的 .eslintrc.js——这两个点漏掉任何一个，都会让你觉得“配了跟没配一样”。