能，但需装Babel插件并手动绑定.jsx文件到JavaScript (Babel)语法；否则JSX标签、插值、属性名会灰显或报错——因Sublime默认不识别JSX。

能，但必须装 Babel 插件并手动把 .jsx 文件绑定到 JavaScript (Babel) 语法，否则所有 JSX 标签、{} 插值、属性名都会灰掉或报错——这不是配置漏了，是 Sublime 默认根本不认识 JSX。

为什么装了插件还是不亮？检查三个硬性条件

常见症状：文件是 App.jsx，右下角显示 Plain Text 或 JavaScript，

没颜色、className="" 双引号不配对、{count > 0 ? : null} 整块变白。

• 扩展名必须是 .jsx（或 .tsx，但需另配）；.js 文件即使内容含 JSX，Babel 默认不接管
• 没手动切换语法：点右下角 → Open all with current extension as… → 选 Babel → JavaScript (Babel)
• 装了冲突插件：如 ReactJS、ES6 Syntax 等旧包，会抢语法定义权，直接卸载

怎么让 .jsx 文件自动用 Babel 语法？Syntax Specific 配置

每次打开都点右下角太累。正确做法是给 .jsx 单独写一条语法绑定规则，不影响 .js 文件。

• 打开任意 .jsx 文件，菜单栏 Preferences → Settings – Syntax Specific
• 在弹出的 JSON 里加这行："syntax": "Packages/Babel/JavaScript (Babel).sublime-syntax"
• 保存后，所有新打开的 .jsx 文件自动生效，不用再点
• 别全局改默认语法——混用 .js 和 .jsx 的项目，全局改会导致普通 JS 文件高亮错乱

Emmet 在 JSX 里不生效？改 syntax_scopes 配置

默认 Emmet 只认 HTML 或 XML 作用域，JSX 是 source.jsx，不匹配就触发不了 div.container → Tab。

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

下载

• 菜单栏 Preferences → Package Settings → Emmet → Settings
• 用户设置里加："syntax_scopes": {"javascript": ["source.js", "source.jsx", "source.js.jsx"]}
• 注意：Emmet 只补标签结构，{} 里的 JS 表达式它不管
• 如果用了 TypeScript + JSX（.tsx），Babel 不支持，得换 TypeScript-TmLanguage 插件

别指望 Babel 提供补全、跳转或类型检查

Babel 插件只干一件事：让 Sublime 正确渲染语法。它不解析 import、不读 node_modules、不知道 useState 是什么。

• 函数组件骨架靠 snippet：输入 rfc + Tab（来自 ReactJS Snippets 插件，和语法高亮无关）
• 补全 useEffect 这类 Hooks，得自己建 snippet 或用 AutoFileName，别装 JS Custom——它和 Babel 冲突，会导致闭合标签错位
• ESLint 报错要靠 SublimeLinter-eslint，且项目根目录必须有 .eslintrc.js 并启用 react/react-in-jsx-scope 规则
• 最常被忽略的一点：Sublime 不知道 key 缺失、setState 异步陷阱、甚至 React.createElement 调用链——它只是个带高亮的文本编辑器