输入!后按Tab即可生成HTML5骨架，需确保文件为.html、语言模式为HTML、光标在空行开头且emmet.triggerExpansionOnTab为true；html:5已废弃，仅!有效。

输入 ! 后按 Tab 就能生成 HTML5 骨架

VSCode 默认启用 Emmet，! 是最简触发符，不需要装插件、不改设置。在 .html 文件中，确保右下角语言模式为 HTML（不是 Plain Text 或 JavaScript），光标处于空行或标签外，输入 ! 后按 Tab（不是 Enter），立刻输出：

    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>

• 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 →
  ，id 和 class 顺序不影响结果，但建议 id 在前
• ul>li*3 → 生成含 3 个
• 的列表；li*0 或负数不报错，也不输出

Tab 没反应？优先排查 emerald 插件和 snippet 冲突

很多用户反馈缩写偶尔失灵，尤其是输入后没自动展开——大概率不是 Emmet 坏了，而是其他插件覆盖了触发逻辑。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 搜索设置项 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 类插件干扰、或远程开发环境配置遗漏。这些点不显眼，但一漏就全盘失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！