VS Code 的 Emmet 是开箱即用的内置生产力工具，支持 HTML 结构缩写（如 section.container>ul.list>li.item*3）、CSS 属性快捷输入（如 m10、df、jcse），JSX/TSX 需配置 emmet.includeLanguages 启用。
VS Code 的 Emmet 不是“需要学”的功能，而是开箱即用、但默认配置下容易被低估的生产力杠杆。它不依赖插件（内置），但很多开发者只用了 div + TAB 这一层，漏掉了真正省时间的写法。
写 HTML 结构时，别再逐行敲标签嵌套
Emmet 的缩写语法本质是「结构描述语言」，不是快捷键合集。比如要写一个带 class 的列表容器：
输入 section.container>ul.list>li.item*3，再按 TAB，立刻生成：
<section class="container">
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</section>
-
>表示父子，+表示兄弟，*3表示重复三次 - 类名直接跟在标签后，不用写
class=""；ID 同理，用#header - 如果当前光标在 JSX/TSX 文件中，默认不触发 Emmet —— 需在设置里搜
emmet.includeLanguages，加一行"javascript": "javascriptreact"
CSS 属性缩写必须记熟几个高频组合
在 CSS 或 style 属性里敲缩写 + TAB，比查文档快得多。重点不是背全表，而是盯住最常写的那十几个：
立即学习“前端免费学习笔记（深入）”；
-
m10→margin: 10px;，mt5→margin-top: 5px;，mb-2→margin-bottom: -2px;（负值支持） -
w100→width: 100px;，w100p→width: 100%;，h50p→height: 50%; -
dib→display: inline-block;，df→display: flex;，jcse→justify-content: space-evenly; - 颜色缩写：
c#f00→color: #f00;，→ background-color: #000;
注意：VS Code 默认对 .css 和 .scss 文件启用 Emmet，但对 .vue 单文件组件中的 <style> 块，需确认设置中 emmet.syntaxProfiles 包含 "vue-html": "html"。
HTML 中快速补全属性和内容，别手动打引号和等号
Emmet 支持在标签内直接展开属性和文本内容，避免打断节奏：
- 写
img[src=logo.jpg alt=Logo]+TAB→<img src="logo.jpg" alt="Logo">（自动加引号、闭合） - 写
a[href=https://example.com]{Click me}+TAB→<a href="https://example.com">Click me</a> - 写
button[disabled]{Save}+TAB→<button disabled>Save</button>（布尔属性不带值也正确）
常见坑：input[type=text] 会生成自闭合标签，但如果你想要 <input type="text"></input>（极少见），得手动改 —— Emmet 按 HTML5 规范处理 void 元素，这是对的，不是 bug。
自定义缩写要谨慎，优先用原生能力覆盖多数场景
虽然可以编辑 emmet.extensionsPath 或用户 snippets 添加自定义缩写，但多数人真正缺的不是新缩写，而是没意识到原生已支持：
-
! + TAB在空文件中生成完整 HTML5 骨架（含<meta charset>） -
lorem10+TAB插入 10 字占位文本，lorem3*4生成 4 段各 3 字的乱数 - 在已有 HTML 标签内按
CTRL+SHIFT+P（Win）或CMD+SHIFT+P（Mac），运行Emmet: Wrap with Abbreviation，选中多行后一键包裹（比如把几段文字包进article>p）
真正容易被忽略的是：Emmet 缩写触发器默认是 TAB，但如果你习惯用 ENTER 或开了其他插件劫持了这个行为，就得去设置里搜 emmet.triggerExpansionOnTab 确保它是 true —— 否则所有缩写都“没反应”。
