在 react 项目中编写 jsx 时，vs code 默认无法对 `div` 等 html 标签触发 tab 自动闭合，根本原因在于文件未被识别为 jsx/tsx 类型——只需将 `.js`/`.ts` 文件重命名为 `.jsx`/`.tsx` 即可启用原生标签补全。
React 组件中的模板语法本质上是 JSX（JavaScript XML），它虽运行于 JavaScript 环境，但VS Code 的 HTML 片段（snippets）和自动闭合功能仅在明确的语言模式下激活。当你使用 .js 或 .ts 后缀时，编辑器将文件识别为纯 JavaScript/TypeScript，此时 div → Tab 不会生成
；而切换为 .jsx 或 .tsx 后，VS Code 自动切换至 "JavaScript React" 或 "TypeScript React" 语言模式，HTML 标签补全、属性提示、自闭合（如✅ 正确做法：
- 将组件文件从 Header.js 改为 Header.jsx；
- 若使用 TypeScript，则从 Button.ts 改为 Button.tsx；
- 修改后，可在 VS Code 右下角状态栏确认语言模式是否已显示为 "JavaScript React"（或 "TypeScript React"）。若未自动切换，点击该区域手动选择。
? 小技巧：
你还可以在文件顶部添加注释显式声明语言模式（临时生效）：
// @ts-check /** @jsxImportSource react */
但推荐优先使用标准后缀，确保语法高亮、ESLint、Prettier 和补全功能协同工作。
⚠️ 注意事项：
ShoopD 网上商店系统
下载
用 php + mysql 驱动的在线商城系统，我们的目标为中国的中小企业及个人提供最简洁，最安全，最高效的在线商城解决方案，使用了自建的会员积分折扣功能，不同的会员组有不同的折扣，让您的商店吸引更多的后续客户。 系统自动加分处理功能，自动处理会员等级，免去人工处理的工作量，让您的商店运作起来更方便省事 采用了自建的直接模板技术，免去了模板解析时间，提高了代码利用效率 独立开发的购物车系统，使用最
立即学习“前端免费学习笔记（深入）”；
- 仅重命名文件不足以让 Webpack/Vite 等构建工具识别——现代脚手架（如 Create React App、Vite + React）默认支持 .jsx/.tsx，无需额外配置；
- 若使用旧版配置，需检查打包工具是否启用了 JSX 解析（例如 Vite 中 react() 插件默认处理 .jsx/.tsx）；
- 避免混用 .js 写 JSX（即使能运行），否则将长期失去编辑器智能支持，降低开发效率。
总之，文件后缀即契约：.jsx 不仅是约定，更是告诉编辑器“此处需以 React 意图解析 HTML-like 语法”。一次重命名，即可解锁完整的 JSX 开发体验。
