在 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 不会生成 <div></div>；而切换为 .jsx 或 .tsx 后，VS Code 自动切换至 "JavaScript React" 或 "TypeScript React" 语言模式，HTML 标签补全、属性提示、自闭合（如 <img />）、以及 Tab 触发的成对包裹（div + Tab → <div></div>）等功能立即生效。
✅ 正确做法：
- 将组件文件从 Header.js 改为 Header.jsx；
- 若使用 TypeScript，则从 Button.ts 改为 Button.tsx；
- 修改后，可在 VS Code 右下角状态栏确认语言模式是否已显示为 "JavaScript React"（或 "TypeScript React"）。若未自动切换，点击该区域手动选择。
? 小技巧：
你还可以在文件顶部添加注释显式声明语言模式（临时生效）：
// @ts-check /** @jsxImportSource react */
但推荐优先使用标准后缀，确保语法高亮、ESLint、Prettier 和补全功能协同工作。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 仅重命名文件不足以让 Webpack/Vite 等构建工具识别——现代脚手架（如 Create React App、Vite + React）默认支持 .jsx/.tsx，无需额外配置；
- 若使用旧版配置，需检查打包工具是否启用了 JSX 解析（例如 Vite 中 react() 插件默认处理 .jsx/.tsx）；
- 避免混用 .js 写 JSX（即使能运行），否则将长期失去编辑器智能支持，降低开发效率。
总之，文件后缀即契约：.jsx 不仅是约定，更是告诉编辑器“此处需以 React 意图解析 HTML-like 语法”。一次重命名，即可解锁完整的 JSX 开发体验。
