VS Code HTML标签管理需组合内置功能与专用工具：一、禁用Auto Close Tag，启用内置"html.autoClosingTag"；二、深度配置Emmet实现高效生成；三、用HTMLHint校验嵌套与语法错误；四、精准设置codeActionsOnSave避免冲突。
VSCode 本身不内置 HTML 标签自动闭合或结构校验逻辑，所谓“管理 HTML 标签”的插件，实际解决的是三类具体问题：标签未闭合、嵌套错乱、手写效率低。真正管用的不是名字带“HTML”“Tag”的插件，而是几个行为明确、配置轻量的工具组合。
为什么 Auto Close Tag 常被误装却几乎没用
它只在输入 <div> 后自动补 </div>，但现代 VSCode 默认已开启 "html.autoClosingTag": true（检查设置里这一项是否为 true）。额外装同名插件反而可能和内置逻辑冲突，导致光标跳位或重复插入。
常见错误现象：<input> 后多出 </input>；<br> 补了闭合标签；输入 <img 时提前触发闭合。
- 禁用或卸载
Auto Close Tag，优先用 VSCode 内置功能 - 对自闭合标签敏感的项目（如 XHTML），手动在
settings.json中加："html.format.enableAutoClosingTag": false - 若需保留插件，请关闭其
autoCloseSelfClosingTag选项
Emmet 是唯一值得深度配置的标签管理工具
VSCode 自带 Emmet，但默认配置对标签管理支持有限。关键不是开/关，而是调准两个参数：
立即学习“前端免费学习笔记（深入）”；
-
"emmet.triggerExpansionOnTab": true—— 按 Tab 展开缩写，比如输ul>li*3+ Tab → 完整列表结构 -
"emmet.syntaxProfiles": {"html": "html5"}—— 强制用 HTML5 规范生成标签，避免老式<font>或冗余<html xmlns>
使用场景：快速搭骨架、补全属性（div.class#id → <div class="class" id="id"></div>）、批量生成重复元素。别依赖它修复已有错误，它不校验，只生成。
标签嵌套错乱？靠 HTMLHint 而不是格式化插件
格式化插件（如 Prettier）只会缩进对齐，不会告诉你 <p><div></p></div> 是非法嵌套。真正报错靠的是静态检查。
安装 HTMLHint 插件后，在项目根目录加 .htmlhintrc 文件，最小可用配置：
{
"rules": {
"tag-pair": true,
"attr-no-duplication": true,
"id-unique": true
}
}
它会在编辑器侧边标出红线，并提示类似 Tag <div> is not closed 或 Unexpected end tag </p>。注意：它不自动修复，只报错——这反而是优势，避免格式化工具盲目“修正”成更糟的结构。
多人协作时，editor.codeActionsOnSave 必须设为显式白名单
很多人开 "editor.codeActionsOnSave": { "source.fixAll": true }，结果保存时 Emmet 自动展开、Prettier 重排、HTMLHint 又插一脚，标签被反复改写，Git diff 一团乱。
- 改成精确控制：
"editor.codeActionsOnSave": { "source.fixAll.html": true }（仅对 HTML 执行修复） - 若用了 ESLint 处理模板字符串中的 HTML（如 Vue/React），要额外排除
html/template类型文件，否则eslint-plugin-vue和HTMLHint会打架 - 检查右下角状态栏语言模式：确保是
HTML，不是Plain Text或PHP，否则所有规则失效
复杂点在于，标签管理不是单点工具能兜底的事——闭合靠内置、生成靠 Emmet、校验靠 HTMLHint、协同靠精准的 codeActions 配置。漏掉任意一环，都会退回手动查错的老路。
