输入!后按Tab即可生成HTML5骨架，需确保文件为.html、语言模式为HTML、光标在空行开头且emmet.triggerExpansionOnTab为true；html:5已废弃，仅!有效。
输入 ! 后按 Tab 就能生成 HTML5 骨架
VSCode 默认启用 Emmet，! 是最简触发符，不需要装插件、不改设置。在 .html 文件中，确保右下角语言模式为 HTML（不是 Plain Text 或 JavaScript），光标处于空行或标签外，输入 ! 后按 Tab（不是 Enter），立刻输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
-
html:5和html5已废弃，新版 VSCode 不识别，只认! - 生成的
默认是英文，中文项目需手动改成lang="zh-CN" - 如果没反应，先点右下角确认语言模式；再检查设置里
emmet.triggerExpansionOnTab是否为true
Emmet 缩写嵌套与属性必须写对括号和引号
Emmet 补全依赖严格的语法结构，括号位置、引号缺失、空格错位都会导致展开失败或输出异常。
-
input[type="text"]✅ 正确；input[type=text]❌ 缺引号，部分版本直接不展开 -
img[src="a.jpg" alt="demo"]✅ 空格不能省，等号前后不加空格 -
div.container#app→<div id="app" class="container"></div>，id 和 class 顺序不影响结果，但建议 id 在前 -
ul>li*3→ 生成含 3 个<li>的列表；li*0或负数不报错，也不输出
Tab 没反应？优先排查 emerald 插件和 snippet 冲突
很多用户反馈缩写偶尔失灵，尤其是输入后没自动展开——大概率不是 Emmet 坏了，而是其他插件覆盖了触发逻辑。
- 搜索设置项
emerald，把所有带这个词的配置（特别是editor.suggest.showSnippets）设为false - 确认
emmet.triggerExpansionOnTab为true，否则只能靠Enter触发 - 禁用非必要主题/代码高亮插件后重启 VSCode，比反复调设置更有效
- 远程开发（WSL/SSH）时，这些设置必须在远程环境里单独配，本地设置不继承
想补全项目里的 CSS 类名？原生不支持，得靠插件
VS Code 自带的 HTML 补全只管标签结构，class="" 里不会列出你项目中真实存在的类名——它根本没读你的 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
- 装插件
IntelliSense for CSS class names in HTML（注意名字带in HTML） - 默认只扫描
./src/**/*.css和./src/**/*.scss；路径不同需加配置："css.styleSheets": ["assets/styles/*.css"] - Tailwind 用户请换用专用插件，原生 CSS 类名插件对
@apply或 CSS-in-JS 完全无效 - 补全类名 ≠ 补全样式规则，它只解决 class 属性值的枚举提示，不提供 hover/focus 等伪类智能推导
真正卡住效率的往往不是“会不会用”，而是“为什么没反应”——多数问题出在语言模式误判、emerald 类插件干扰、或远程开发环境配置遗漏。这些点不显眼，但一漏就全盘失效。
