VSCode HTML标签自动补全需按Tab键触发，且光标须在标签名末尾紧邻>或空格；class/id属性补全需插件支持；Emmet失效多因语言模式错误或未启用对应支持；自定义片段应加项目前缀并限定作用域。
HTML标签自动补全为什么没反应
VSCode默认就支持HTML标签补全，但很多人发现敲 <di 按回车没出来 <div>——大概率是触发方式不对。它不依赖“按回车”，而是靠 Tab 或 Enter（取决于设置），且需要光标在标签名末尾、后面紧跟着 > 或空格。
常见错误现象：<div 后直接敲空格，结果变成 <div （带空格），此时补全失效；或者用了 Emmet 缩写但没启用 Emmet 支持。
- 确认
"emerald.emmet": true在设置里已开启（新版 VSCode 默认开） - 输入标签前缀后，按
Tab是最稳的补全方式；Enter需要检查"html.suggest.html5": true - 如果用的是远程开发（SSH/Containers），确保远程端也安装了 HTML 语言服务器（
vscode-html-languageservice）
怎么让 class 和 id 属性也自动补全
原生 HTML 补全只管标签结构，class/id 值不会自动填。想补全 CSS 类名或 ID，得靠插件或配置联动。核心逻辑是：VSCode 本身不解析项目 CSS，必须告诉它“这些类名在哪”。
使用场景：你在 index.html 里写 <div class="|"，希望弹出 header、btn-primary 等项目里真实存在的类名。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 装插件
Auto Close Tag和IntelliSense for CSS class names in HTML（后者专治 class 补全） - 插件默认扫描
./src/**/*.css和./src/**/*.scss，如果你的样式在assets/styles/下，得在设置里加"css.styleSheets": ["assets/styles/*.css"] - 注意：CSS-in-JS（如 styled-components）或 Tailwind 的
@apply不会被该插件识别，得换用Tailwind CSS IntelliSense
Emmet 缩写补全失效的三个典型原因
写 ul>li*3 按 Tab 没生成列表？不是 Emmet 坏了，而是当前文件没被识别为 HTML 上下文，或者缩写语法本身被拦截了。
常见错误现象：div.container 补全正常，但 div#app 不生成 id；或者在 .vue 文件的 <template> 区域里完全不响应。
- 检查右下角状态栏语言模式是不是
HTML（不是Plain Text或Vue）；.vue 文件需装Volar插件并启用"volar.autoInsertEmmetSupport": true - Emmet 默认只在
text.html.basic和vue等特定语言模式生效，json或markdown里敲ul>li不会动 -
!（生成 HTML5 模板）在非空文件里可能被禁用，清空文件再试一次
自定义 HTML 片段（snippets）怎么写才不冲突
自己写的 html.json 片段常和内置补全打架：比如定义了 myheader，结果输 myh 却弹出 myheader 和 myhero（另一个插件的），甚至覆盖掉原生 header 标签。
性能影响：片段太多、前缀太短（如 h），会拖慢整个补全列表渲染速度。
- 片段前缀建议加项目标识，比如
proj-header而不是header，避免和原生标签重名 - 在
html.json里用"scope": "text.html.basic"限定作用域，别设成"*" - 不要在
body字段里写复杂逻辑（如嵌套${1:content}多层），VSCode 解析慢，尤其在大文件里会卡顿
最易被忽略的一点：改完 html.json 必须重启 VSCode 窗口（不是重载窗口），否则新片段不加载。改了设置不生效，先关再开，比查半天配置快得多。
