VS Code中编写React的HTML标签是否有快捷方式？

一、VS Code内置Emmet配置（无需额外扩展） #

VS Code自带的Emmet工具完全支持React项目，只需简单配置就能实现类似Angular的标签快捷补全：

1. 打开设置（快捷键Ctrl+,/Cmd+,），搜索emmet.includeLanguages
2. 添加以下配置项：

   "emmet.includeLanguages": {
     "javascriptreact": "html",
     "typescriptreact": "html"
   }
   

3. 保存后，在React组件文件里输入标签名（比如div、p），按Tab键就能直接生成完整的闭合标签：div → <div></div>，还支持Emmet语法，比如div.container → <div className="container"></div>（自动适配React的className）。

二、实用扩展增强补全体验 #

如果需要更智能的组件和标签补全，推荐安装这些扩展：

• ES7+ React/Redux/React-Native snippets：除了原生HTML标签的Tab补全，还提供大量React组件快捷模板，比如输入rfc生成函数组件框架，rafce生成带导出的箭头函数组件，同时标签补全功能完全适配React语法。
• Auto Close Tag：输入标签开头<div时，自动补全闭合部分></div>，省去手动输入>和闭合标签的步骤。
• Auto Rename Tag：修改开始标签名时，自动同步更新闭合标签，避免手动修改出错。

三、其他编辑器支持 #

像WebStorm这类IDE，默认就对React项目的HTML标签提供Tab补全支持，输入标签名按Tab即可生成完整闭合标签，无需额外配置。

内容的提问来源于stack exchange，提问作者User9123