在 react 项目中，vs code 默认不会为 `.js` 文件启用 jsx 片段补全；需将组件文件扩展名改为 `.jsx`（或 `.tsx`），才能触发 `
` 等标签输入后按 tab 自动闭合的智能补全功能。
React 组件中编写 JSX 时，若希望输入 div 后按 Tab 键自动展开为
（光标位于标签对之间），关键在于 文件语言模式识别 和 VS Code 片段支持机制。✅ 正确做法：
- 将 React 组件文件从 .js 改为 .jsx（函数组件、类组件均适用）；
- 若使用 TypeScript，则对应使用 .tsx 扩展名；
- 保存后，VS Code 会自动将语言模式识别为 JavaScript React 或 TypeScript React，从而启用 JSX 专属代码片段（如 div → ，ul →
? 验证与增强设置（可选但推荐）：
BEES企业网站管理系统3.4
下载
主要特性： 1、支持多种语言 BEES支持多种语言，后台添加自动生成，可为每种语言分配网站风格。 2、功能强大灵活 BEES除内置的文章、产品等模型外，还可以自定义生成其它模型，满足不同的需求 3、自定义表单系统 BEES可自定义表单系统，后台按需要生成，将生成的标签加到模板中便可使用。 4、模板制作方便 采用MVC设计模式实现了程序与模板完全分离，分别适合美工和程序员使用。 5、用户体验好 前台
- 打开 VS Code 设置（Ctrl+, / Cmd+,），搜索 files.associations；
- 添加关联确保 .jsx/.tsx 被正确识别：
"files.associations": { "*.jsx": "javascriptreact", "*.tsx": "typescriptreact" } - 确保已启用 Emmet（VS Code 默认开启）：在设置中搜索 emmet.includeLanguages，确认 javascriptreact 和 typescriptreact 已包含（或留空，默认支持）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 仅修改文件扩展名即可生效，无需额外安装插件（Emmet 和基础语言支持已内置）；
- 若仍不生效，请右下角点击当前语言模式（如 “JavaScript”），手动选择 JavaScript React；
- 不建议在 .js 文件中写 JSX —— 这不仅影响补全，还会导致 ESLint 报错、TypeScript 编译失败及 React 严格模式警告。
? 小技巧：
输入 div.my-class#my-id + Tab 可快速生成
完成以上配置后，你就能在 React 项目中享受原生、高效、符合习惯的 HTML 标签自动补全体验了。
