html标签自动闭合失效需检查三项：1.确认文件语言模式为html；2.排查emmet或prettier等插件干扰；3.区分空元素（如img）与容器元素（如div）的闭合规则。
HTML标签自动闭合没生效？检查这三项配置
VSCode 默认其实已启用 HTML 标签自动闭合，但多数人遇到“不闭合”问题，根本原因不是功能关了，而是被其他设置或插件干扰了。
常见错误现象：div 输入后按 Enter 或 > 没反应；输入 <img> 后没自动补全 <code>/>；或者只对部分标签生效（比如 p 行，span 不行）。
- 确认
"html.autoClosingTag"是true（默认就是true，一般不用改） - 重点检查
"emeraldwalk.runonsave"或"prettier-vscode"是否在保存时强行格式化并删掉了自动生成的闭合符——它们可能覆盖编辑时行为 - 确保当前文件语言模式是
html：右下角状态栏点开语言标识，选HTML，别是Plain Text或PHP（哪怕后缀是.html，也可能被误判）
重命名标签时子元素丢失？这是 Emmet 的锅
很多人以为“重命名标签联动”是 VSCode 原生功能，其实它依赖 Emmet。当你用 F2 重命名一个 div，结果里面所有子节点被清空，大概率是 Emmet 的 wrapWithAbbreviation 模式意外触发了。
使用场景：在 Vue/React 单文件组件里写 <template></template> 区域，或纯 HTML 中快速重构结构。
- 关闭 Emmet 对非 HTML 文件的干扰：在设置中搜
emmet.includeLanguages，删掉vue-html或javascript这类条目，除非你真需要在 JS 里写 Emmet - 重命名前先确认光标停在开始标签的标签名上（比如
div>中的div），而不是在尖括号里或属性值中 - 如果用了 Prettier，它会在保存时把
<div></div>改成<div></div>，导致后续重命名失效——建议在.prettierrc中加"htmlWhitespaceSensitivity": "css"并禁用htmlSelfClosingTag相关规则
Vue/JSX 里自动闭合失效？语言服务没加载对
在 .vue 文件中，<template></template> 区域的标签闭合由 Volar 提供支持；在 JSX/TSX 中，则依赖 TypeScript Server 和 ESLint 插件协同。原生 HTML 设置在这里基本不起作用。
性能影响：Volar 启动慢、或同时装了 Vetur，会导致语言服务冲突，表现为输入 <el-> 后无提示、也不闭合。</el->
- 卸载
Vetur（它和Volar不兼容），重启 VSCode - 在
.vue文件中按Ctrl+Shift+P→ 输入Developer: Toggle Developer Tools，看 Console 里有没有Volar: failed to activate - 检查
settings.json中是否误设了"vetur.validation.template"或"html.suggest.html5"，这些会干扰 Volar 的模板解析
为什么有些标签就是不自动闭合？看它是「空元素」还是「容器元素」
VSCode 的自动闭合逻辑严格遵循 HTML 规范：只有被定义为 void element（空元素）的标签才自动补 />，比如 img、br、input；而 div、p、span 必须补完整结束标签，且仅在你输入 > 或回车后才触发。
容易踩的坑：以为输入 <img> 后敲空格就该闭合——其实要敲 <code>> 才行；或者在 JSX 中写 <img src=""> 后直接敲 <code>Enter，结果换行但没闭合，因为 JSX 要求显式写 /> 或 （后者非法）。
- HTML 空元素列表（共14个）：
area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr - 自定义元素（如
<my-button></my-button>）默认当容器处理，不会自动闭合，需手动补 - 在 CSS-in-JS 或模板字符串里写 HTML（比如
html`<div>`），自动闭合完全失效——VSCode 不识别这种上下文 <p>最麻烦的是嵌套在 JS 字符串里的 HTML，编辑器根本分不清那是代码还是模板，这时候别指望自动闭合，老老实实手写或用 Emmet <code>!展开骨架更靠谱。
