在 React 项目中，若在 .jsx 或 .tsx 文件中输入 HTML 标签（如 div）后按 Tab 键无法自动补全为 <div></div>，通常是因为文件未被 VS Code 正确识别为 JSX/TSX 语法上下文，只需确保使用正确的文件扩展名即可启用内置标签补全功能。
在 react 项目中，若在 `.jsx` 或 `.tsx` 文件中输入 html 标签（如 `div`）后按 tab 键无法自动补全为 `
`，通常是因为文件未被 vs code 正确识别为 jsx/tsx 语法上下文，只需确保使用正确的文件扩展名即可启用内置标签补全功能。React 组件中编写的 JSX 本质上是 JavaScript/TypeScript 代码的语法扩展，而非纯 HTML。VS Code 的 HTML 标签自动补全（如输入 div + Tab → <div></div>）默认仅在标准 HTML、.html、.htm 文件中生效；而在 React 项目中，该功能需依赖编辑器对 .jsx 或 .tsx 文件的语义识别与语言模式支持。
✅ 正确做法：将组件文件扩展名从 .js / .ts 显式改为 .jsx 或 .tsx
例如：
- ❌ src/components/Button.js → 不触发 JSX 补全
- ✅ src/components/Button.jsx → 自动启用 div/tab 补全、JSX 语法高亮、Props 智能提示等
? 小技巧：在 VS Code 中，右下角状态栏会显示当前语言模式（如 “JavaScript”）。若打开 .jsx 文件仍显示 “JavaScript”，可点击该区域 → 选择 “React JSX” 手动切换，随后补全即刻生效。
此外，确保已启用 VS Code 内置的 html.suggest.html5 设置（默认开启），无需额外安装插件。你也可以在 settings.json 中显式确认：
{
"html.suggest.html5": true,
"files.associations": {
"*.jsx": "javascriptreact",
"*.tsx": "typescriptreact"
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 .js 文件编写 JSX —— 即使内容含 <div>，VS Code 仍以纯 JS 模式解析，禁用 HTML 补全；
- 创建新组件时，优先使用 ComponentName.jsx 命名规范，避免后期重命名引发路径/导入问题；
- 若使用 TypeScript，务必用 .tsx（而非 .ts），否则 TS 编译器和编辑器均无法正确校验 JSX 语法；
- ESLint/Prettier 等工具也依赖正确的文件扩展名来加载对应解析器（如 @babel/eslint-parser 对 .jsx 的处理）。
总结：React 中的 HTML 标签自动补全不是“开关式功能”，而是由文件类型驱动的智能行为。一个准确的扩展名（.jsx / .tsx）是解锁 VS Code 全套 JSX 开发体验（补全、高亮、错误检查、重构支持）最基础也最关键的配置。
