Emmet 是 VSCode 内置的高效编码工具，支持 HTML 结构快速生成（如 div>p*2）和 CSS 属性简写补全（如 m10→margin:10px），掌握核心规则与常用缩写即可显著提升效率。
Emmet 是 VSCode 内置的高效编码工具，不用安装插件就能用，写 HTML 和 CSS 时能大幅减少重复敲键盘的时间。关键不是记一堆缩写，而是掌握几条核心规则，再配合常用缩写，效率立刻提升。
HTML 快速生成结构
在 HTML 文件中输入缩写后按 Tab（或 Enter，取决于设置），VSCode 会自动展开为完整标签结构。
-
单标签：输入
div→ Tab →<div></div>；img→<img src="" alt=""> -
嵌套：用
>表示子元素，div>p>span→ 展开为三层嵌套结构 -
兄弟节点：用
+连接，h1+p+ul>li*3→ 一个 h1、一个 p、一个含 3 个 li 的 ul -
属性与内容：用
[]加属性，div.container#main[data-id="1"]；用{文本}插入内容，p{Hello}→<p>Hello</p>
CSS 缩写即写即补全
在 CSS 或 style 标签内输入简写，按 Tab 可补全为完整属性，支持常见前缀和值推导。
立即学习“前端免费学习笔记（深入）”；
-
m10→margin: 10px;；mt-5→margin-top: -5px; -
w100→width: 100%;；bgc#f00→background-color: #f00; -
dib→display: inline-block;；pos:a→position: absolute; - 支持颜色简写：
c#000→color: #000;；ff:sc→font-family: system-ui, -apple-system;
自定义与微调很实用
默认行为够用，但稍作配置能让 Emmet 更贴合你的习惯。
- 在设置里搜 emmet，可开启/关闭特定语法（如是否补全注释
/* */） - 修改
emmet.variables可定义常用变量，比如把doc缩写设为带 viewport 的 HTML5 模板 - 想让
.class在 CSS 中也触发补全？打开emmet.triggerExpansionOnTab并确保在 CSS 语言模式下启用 - 缩写冲突时（比如输入
ul却弹出其他建议），可在设置中调整emmet.showExpandedAbbreviation控制提示逻辑
基本上就这些。不需要背全部缩写，先熟记 div>p*2、.container>ul>li*5、m10、w100 这几类，再边写边查文档，一两周就形成肌肉记忆了。
