17370845950

在 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 标签补全、属性提示、自闭合（如 ）、以及 Tab 触发的成对包裹（div + Tab → ）等功能立即生效。

✅ 正确做法：

• 将组件文件从 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 开发体验。