Emmet是VS Code内建的HTML/CSS加速引擎，1. 用缩写如ul>li.item$*3按Tab生成完整列表结构；2. CSS中输入m10、fw等可展开为margin: 10px、font-weight: bold等样式；3. 支持标签包裹、光标定位和自定义代码片段，大幅提升编码效率。
用过VS Code的人，大多都体会过写代码时那种“卡顿感”——标签要闭合、结构要嵌套、类名重复写。但当你打开Emmet，这些繁琐瞬间变得像打字游戏一样流畅。它不是插件，而是内建在VS Code中的强大语法引擎，专为HTML和CSS提速而生。
1. HTML：一行缩写生成完整结构
Emmet最惊艳的地方，就是用极简缩写生成复杂的HTML结构。
示例：输入：
ul>li.item$*3按下 Tab 后变成：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
这里面的语法很直观：
-
>表示子元素（嵌套） -
+表示同级元素 -
.class添加类名 -
#id添加ID -
$是计数占位符，配合*可批量生成
header>nav>ul>li*3>a[href="#"]{链接$}一键生成带文本的导航菜单。
2. CSS：属性缩写秒输常用样式
写CSS时，Emmet能帮你快速补全属性名，尤其适合那些又长又容易拼错的。
立即学习“前端免费学习笔记（深入）”；
输入：m10 + Tab → margin: 10px;输入：
fw + Tab → font-weight: bold;输入：
posa + Tab → position: absolute;
它支持智能单位补全：
-
h100→height: 100px;（自动加px） -
w50%→width: 50%; -
lh1.5→line-height: 1.5;
3. 提升效率的实用技巧
Emmet不只是“按Tab展开”，还能深度融入你的工作流。
- 在任意HTML标签内输入文字，选中后按 Ctrl+Shift+G（Windows）或 CMD+Shift+G（Mac），可包裹成指定标签，比如快速把文本变成链接或span
- 使用
|符号控制光标位置，如：a[href="#"]|展开后光标直接落在标签内容区 - 支持自定义片段，在 VS Code 的用户代码片段中添加自己的Emmet规则，比如设置
mycard一键生成项目常用的卡片结构
基本上就这些。Emmet不复杂，但一旦习惯，你就再也回不到手动敲闭合标签的日子了。
