VSCode输入HTML标签时如何自动包裹后方已有文本

VSCode 原生没有提供「在文本前输入完整起始标签（如<p>）、自动将对应闭合标签放到文本段末尾」的开箱设置，默认HTML自动闭合逻辑为：输入起始标签的右尖括号>后，立刻在光标当前位置插入闭合标签，不会主动向后识别已有文本做包裹，这也是当前出现<p></p>Hello world!错误结构的原因。

无需安装第三方插件、无需手动打开命令面板触发Emmet指令，通过以下原生配置调整，即可实现最低操作成本的自动包裹效果：

具体配置步骤 #

1. 调整HTML自动闭合规则
   使用快捷键Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板，搜索配置项html.autoClosingTags，将默认值true修改为afterOpen；也可以直接打开用户配置settings.json添加如下代码：

"html.autoClosingTags": "afterOpen"

修改后，输入<p>时编辑器不会立刻在光标后插入</p>，从根源避免闭合标签插在文本前方的问题。该配置不会影响正常的闭合标签补全，当你手动输入</时，编辑器依然会自动匹配上下文补全对应的闭合标签名。

2. 开启Emmet Tab自动触发包裹
   在设置面板搜索emmet.triggerExpansionOnTab并勾选启用，对应settings.json配置为：

"emmet.triggerExpansionOnTab": true

配置完成后的操作逻辑：将光标移动到需要包裹的文本行起始位置，直接输入目标标签名（例如输入p，不需要加尖括号），按下Tab键，编辑器会自动将整行文本包裹在对应标签内，直接生成<p>Hello world!</p>的正确结构。

效果参考 #

<!-- 原始文本 -->
Hello world!

<!-- 配置后操作：行首输入p按Tab生成结果 -->
<p>Hello world!</p>

注：目前原生暂不支持完全无额外按键、输入完整起始标签就自动向后扫描文本放置闭合标签的行为，上述方案是无插件、无手动命令触发前提下最接近需求的实现方式。

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