Emmet是VSCode中提升前端开发效率的工具，1. 可用简写快速生成HTML结构，如div、ul>li*3；2. 支持添加类名、ID和属性，如div.header、a[href="#"]；3. 在CSS中实现属性简写展开，如m10→margin:10px；4. 结合快捷键如Tab、Ctrl+Shift+Enter提升编辑速度，熟练后可大幅减少重复编码。
VSCode 中的 Emmet 是前端开发的效率利器，能通过简写快速生成 HTML 和 CSS 代码。掌握它的快捷键和使用技巧，可以大幅减少重复输入。
1. HTML 元素快速生成
在 HTML 文件中输入元素名称缩写，按 Tab 或 Enter 即可展开为完整标签。
-
div→<div></div> -
p→<p></p> -
ul>li*3→ 生成包含 3 个列表项的无序列表
支持嵌套和数量符号：
-
section>div.container>h1+p：生成嵌套结构 -
ul>li.item$*3：生成 item1、item2、item3 的类名
2. 添加类名、ID 和属性
用 . 添加 class，# 添加 id，[] 自定义属性。
-
div.header→<div class="header"></div> -
nav#main-nav→<nav id="main-nav"></nav> -
a[href="#"][title="链接"]→ 带自定义属性的链接 -
input[type="text"].form-control→ 组合使用更高效
3. CSS 简写提升编码速度
在 CSS 文件中，Emmet 支持属性缩写，输入后按 Tab 展开。
-
pos→position: relative; -
m10→margin: 10px; -
fw→font-weight: bold; -
bd→border: 1px solid #000;
支持带值的简写：
-
mt20→margin-top: 20px; -
lh24→line-height: 24px;
4. 快捷键与编辑技巧
结合 VSCode 内置命令，进一步提升效率。
- Ctrl + E（macOS: Cmd + E）：触发 Emmet 补全建议
- Ctrl + Shift + Enter：在当前行上方插入空行并保持标签闭合
- 在任意标签内按 Ctrl + Alt + . 可快速闭合标签
- 输入完成后使用 Tab 键跳转到下一个占位符（如文本内容或属性）
基本上就这些。熟练使用 Emmet 后，大部分结构化代码都能几秒内生成，关键是多练常用表达式。不复杂但容易忽略。
