vscode html标签自动闭合需开启html.autoclosingtag为true，确保语言模式为html，避免prettier/emmet冲突，并在vue/jsx中使用对应扩展设置。
VSCode 默认就支持 HTML 标签自动闭合，但需要正确启用相关设置，否则会失效——不是插件问题，而是配置没对。
HTML 标签不自动闭合的常见原因
多数人遇到“敲 <div> 不出 <code>
VSCode怎么设置自动关闭标签_VSCode如何让HTML标签自动补全闭合标签【技巧】
梦枫吖_8406
2026-04-04
871人浏览
原创
html.autoClosingTag 被关了，或者被其他扩展（比如 Prettier、Emmet 冲突）覆盖了行为。
-
html.autoClosingTag是控制 HTML 标签自动闭合的核心开关，必须设为true - 如果同时启用了
emeraldwalk.runonsave或esbenp.prettier-vscode，它们可能在保存时重写标签结构，掩盖自动闭合效果 - 文件语言模式必须是
HTML（右下角显示 “HTML”，不是 “Plain Text” 或 “TypeScript React”）
如何手动开启 HTML 自动闭合
直接改设置比找 GUI 更稳，避免界面隐藏选项或缓存延迟：
- 按
Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置 - 搜索
html.autoClosingTag，勾选它 - 顺手检查
editor.autoClosingBrackets是否为languageDefined（不是always或never） - 重启 VSCode 或重新打开 HTML 文件生效（部分版本需重载窗口）
Emmet 和自动闭合的关系
Emmet 的 ! + Tab 生成完整 HTML 模板，但它和自动闭合是两套机制：前者是模板展开，后者是输入时实时响应。别指望 Emmet 开了就能让 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1675" title="VSCode"><img
src="https://img.php.cn/upload/skill/000/000/081/178842972858328.jpg" alt="VSCode" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill1675" title="VSCode" class="overflowclass">VSCode</a>
<p class="overflowclass">避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。</p>
</div>
<a rel="nofollow" href="/xiazai/skill1675" title="VSCode" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 自动补
- Emmet 的
html.autoClosingTag冲突时，优先级低于原生 HTML 支持 - 如果想用 Emmet 快速写带闭合的标签，用
div+ Tab，它会输出<div></div>；但这是 Emmet 行为，不是编辑器自动闭合 - 禁用 Emmet 的
emmet.triggerExpansionOnTab可避免 Tab 键行为混乱
为什么在 .vue 或 .jsx 里不生效
因为这些文件的语言模式不是 HTML，而是 Vue 或 JavaScript React，原生 html.autoClosingTag 不起作用。
- Vue 单文件组件中，需靠
vetur或volar提供类似能力（Volar 推荐开启volar.autoCloseTag） - JSX 中标签闭合由
javascript.autoClosingTags控制，但它只对合法 JSX 标签有效（如<div>），不处理自定义组件名 <li>不要强行把 <code>.vue文件关联成HTML语言模式——语法高亮和校验全乱
真正容易被忽略的是语言模式和设置作用域：全局设置开了，但工作区设置了 "html.autoClosingTag": false，就会被覆盖；.vue 文件里光调 html. 前缀的设置，根本没用。
