在 react 项目中，vs code 默认不会为 `.js` 文件启用 jsx 片段补全；需将组件文件扩展名改为 `.jsx`（或 `.tsx`），才能触发 `

` 等标签输入后按 tab 自动闭合的智能补全功能。

React 组件中编写 JSX 时，若希望输入 div 后按 Tab 键自动展开为

（光标位于标签对之间），关键在于 文件语言模式识别 和 VS Code 片段支持机制。

✅ 正确做法：

• 将 React 组件文件从 .js 改为 .jsx（函数组件、类组件均适用）；
• 若使用 TypeScript，则对应使用 .tsx 扩展名；
• 保存后，VS Code 会自动将语言模式识别为 JavaScript React 或 TypeScript React，从而启用 JSX 专属代码片段（如 div →
  ，ul →
  等）。

? 验证与增强设置（可选但推荐）：

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

下载

1. 打开 VS Code 设置（Ctrl+, / Cmd+,），搜索 files.associations；
2. 添加关联确保 .jsx/.tsx 被正确识别：

   "files.associations": {
   "*.jsx": "javascriptreact",
   "*.tsx": "typescriptreact"
   }

3. 确保已启用 Emmet（VS Code 默认开启）：在设置中搜索 emmet.includeLanguages，确认 javascriptreact 和 typescriptreact 已包含（或留空，默认支持）。

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 仅修改文件扩展名即可生效，无需额外安装插件（Emmet 和基础语言支持已内置）；
• 若仍不生效，请右下角点击当前语言模式（如 “JavaScript”），手动选择 JavaScript React；
• 不建议在 .js 文件中写 JSX —— 这不仅影响补全，还会导致 ESLint 报错、TypeScript 编译失败及 React 严格模式警告。

? 小技巧：
输入 div.my-class#my-id + Tab 可快速生成

（Emmet 语法在 JSX 中完全可用）。

完成以上配置后，你就能在 React 项目中享受原生、高效、符合习惯的 HTML 标签自动补全体验了。