VSCode 默认支持HTML/XML标签自动闭合，需启用html.autoClosingTag并设editor.autoClosingBrackets为languageDefined；XML需手动切语言模式或装Red Hat XML插件；Emmet需开启emmet.triggerExpansionOnTab；自定义组件补全依赖snippets或volar等插件。
VSCode 默认就支持 HTML/XML 标签自动闭合，但得开对开关
VSCode 本身不依赖插件就能补全 <div> 这类标签，前提是启用了内置的「自动闭合标签」功能。很多人装了 Emmet、装了 Auto Rename Tag，却没意识到最基础的补全其实被关掉了。
常见错误现象：<span 输完按 Space 或 > 没反应，或者只补了 > 却不生成 </span>；在 JSX 或 Vue 单文件里补全失效——往往不是插件问题，而是设置冲突。
- 打开设置（
Ctrl+,或Cmd+,），搜html.autoClosingTag，确保勾选 - 同时检查
editor.autoClosingBrackets设为languageDefined（不是always），否则可能在引号或括号里误触发 - XML 场景下（比如
.wsdl、.xsd），VSCode 默认不激活 HTML 相关语言特性，需手动在右下角点击语言模式，选XML或安装Red Hat XML插件来启用补全
Emmet 补全比原生更智能，但默认快捷键容易被忽略
原生补全只管闭合，Emmet 才真能“写一半补一串”：输 ul>li*3 回车直接出完整列表。但它默认不响应 Tab，尤其在非 .html 文件里（比如 .vue 或 .jsx）需要手动开启。
使用场景：快速搭结构、写模板片段、补带属性的标签（如 input[type="text"]）。
立即学习“前端免费学习笔记（深入）”；
- 确保设置中
emmet.triggerExpansionOnTab为true - 在
.vue文件中，Emmet 默认只对<template>区生效；若想在<style>里用 CSS 缩写，要加emmet.includeLanguages配置：{"css": "css"} - 输入
div#app后按Tab，补出<div id="app"></div>；但若光标停在引号内（如class="|"），Tab不会触发 Emmet，得先移出来
XML 场景下标签补全常失败，本质是语言服务没加载
VSCode 对纯 XML（比如配置文件、SOAP 请求体）的补全支持很弱，原生不提供标签名提示、不校验嵌套、也不自动闭合。这不是 bug，是设计如此——它把 XML 当作文本处理，除非你告诉它“这是某种有 Schema 的 XML”。
性能影响：启用 XML 语言服务器（如 Red Hat XML）会多占 50–100MB 内存，但换来的是标签名自动提示、属性校验、以及真正的自动闭合。
- 装插件
redhat.vscode-xml后，打开任意.xml文件，状态栏会显示XML，此时<foo输完按>就能闭合 - 若 XML 有 XSD 或 DTD，把路径填进
xml.fileAssociations设置，补全会精准到该 Schema 定义的元素 - 别指望
Ctrl+Space在 XML 里弹出所有标签——它只提示当前上下文合法的子元素，不是全量枚举
自定义标签或框架组件补全，得靠 snippets 或插件
Vue 的 <el-button>、React 的 <MyModal>、甚至公司内部组件库，VSCode 原生和 Emmet 都不认识。这时候补全是“不可自动推导”的，必须显式声明。
容易踩的坑：有人试图用正则替换或改 html.suggest.html5 设置来强行注入，结果导致原生标签提示变慢或消失。
- 最稳的方式是写
snippets：在用户 snippets 里建html.json，加一条"el-button": {"prefix": "elb", "body": ["<el-button$1>$2</el-button>"]} - Vue 用户推荐插件
volar，它能从components.d.ts或defineComponent推导出组件名并补全 - 如果项目用 TypeScript 写组件，确保
compilerOptions.types包含组件库类型，否则 volar 或 intellisense 看不见它们
补全这件事，越靠近标准 HTML 就越省心，越往自定义、跨框架、无类型定义的方向走，就越得亲手喂数据——没有银弹，只有配得够细才不卡壳。
