VSCode内置Emmet支持，通过简短缩写快速生成HTML和CSS代码。输入!+Tab可生成HTML5结构，使用>、+、*实现嵌套、同级与重复元素，#和.添加id与class，ahref{文本}可添加属性与内容；CSS中pos、m10等缩写展开为完整属性，支持单位输入如mt20px，flex布局fxd、jcc、aic等提升样式编写效率；配合Ctrl+E转换当前行、Enter展开及自定义配置，显著加快页面骨架与样式开发速度。
VSCode 内置了 Emmet 支持，能极大提升 HTML 和 CSS 的编写效率。只要输入简短的缩写，按 Tab 或 Enter 就能生成完整的代码结构，特别适合快速搭建页面骨架或样式规则。
HTML 中的 Emmet 用法
在 .html 文件中，Emmet 可以将简洁的表达式转换为完整的标签结构。
• 输入 ! 然后按 Tab，快速生成 HTML5 文档结构：! →• 使用 > 表示嵌套，+ 表示同级元素，* 表示重复：Document
div>ul>li*3 →• 用 # 添加 id，. 添加 class：
div.container#main →• 添加属性和内容也很方便：
a[href="#"][title="Link"]{点击这里} →
点击这里
CSS 中的 Emmet 缩写技巧
在 .css 文件中，Emmet 提供了大量属性缩写，减少重复输入。
• 输入属性前缀即可展开：pos → position: relative; m10 → margin: 10px; p5 → padding: 5px; db → display: block; fl → float: left• 支持带单位的数值：
mt20px → margin-top: 20px; w100p → width: 100%; h50em → height: 50em• 快速生成 flex 布局相关样式：
fxd → flex-direction: row; jcc → justify-content: center; aic → align-items: center;
提高效率的小技巧
除了基本用法，掌握这些操作能让编码更流畅。
立即学习“前端免费学习笔记（深入）”；
• 在任意 HTML 标签内按 Ctrl+E（macOS 为 Cmd+E），可将当前行转为 Emmet 缩写再展开。• 输入缩写后，除了 Tab，也可以用 Enter 触发展开（取决于设置）。
• VSCode 支持自定义 Emmet 配置，在 settings.json 中可添加新缩写或启用 JSX 支持。
基本上就这些。熟练使用 Emmet 后，写 HTML 结构和 CSS 样式会快很多，尤其在搭建原型或组件时特别省时间。不复杂但容易忽略。
