Emmet是vscode前端开发提速核心工具，通过缩写快速生成html/css代码。输入div按Tab生成<div></div>，.container生成带class的div，#header生成带id的div，ul>li*5生成5个列表项，form:post创建POST表单，a[href=”#”]{点击这里}生成链接；CSS中pos展开为position: relative，fw→font-weight: bold，m10→margin: 10px，bd1#0→border: 1px solid #000，bgc→background-color: #fff，z→z-index: 1；启用Emmet需在设置中开启Tab触发，支持jsX/vue需添加语言映射，Ctrl+E（Cmd+E）可快速扩展，结合自动补全提升效率，熟练后编写结构如打字般流畅。
VSCode 中的 Emmet 是前端开发提速的核心工具之一。它允许你通过简短的缩写快速生成完整的 HTML 或 CSS 结构，大幅减少重复敲击键盘的时间。只要掌握常用语法，编写页面结构和样式几乎可以“一气呵成”。
HTML 中的 Emmet 缩写用法
在 VSCode 的 HTML 文件中输入 Emmet 缩写后，按下 Tab 或 Enter 键即可展开为完整标签。
- 输入 div 按 Tab → 生成
<div></div> - 输入 .container → 生成
<div class="container"></div> - 输入 #header → 生成
<div id="header"></div> - 输入 ul>li*5 → 生成一个包含 5 个列表项的无序列表
- 输入 form:post → 快速创建以 POST 提交的 form 标签
- 输入 a[href=”#”]{点击这里} → 生成带文本和 href 的链接
CSS 中的 Emmet 快捷方式
在 CSS 文件中，Emmet 同样支持属性缩写，输入后按 Tab 即可补全。
- 输入 pos → 展开为
position: relative; - 输入 fw →
font-weight: bold; - 输入 m10 →
margin: 10px; - 输入 bd1#0 →
border: 1px solid #000; - 输入 bgc →
background-color: #fff; - 输入 z →
z-index: 1;（或自动递增）
提升效率的实用技巧
VSCode 对 Emmet 做了深度集成，结合设置和快捷键能进一步提升体验。
立即学习“前端免费学习笔记（深入）”；
- 确保设置中启用了 Emmet：打开设置搜索 “emmet”，确认 Emmet: Trigger Expansion on Tab 已开启
- 在 JSX、Vue 等文件中使用 Emmet：需在设置中添加语言映射，如将 javascriptreact 加入 Emmet 支持列表
- 使用 Ctrl+E（macos: Cmd+E）快速扩展当前缩写
- 输入时利用自动补全建议，VSCode 会提示可能的 Emmet 缩写
基本上就这些。熟练使用 Emmet 后，写 HTML 结构像打字一样快，写 CSS 也不再是重复劳动。关键是多练常用缩写，让它成为肌肉记忆。不复杂但容易忽略。