React JSX 文件中实现 HTML 标签自动补全的配置方法

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

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

✅ 正确做法：

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

  ，ul →

  等）。

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

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 标签自动补全体验了。