emmet 是 vscode 内置的前端编码加速工具，支持 html 结构缩写展开、css 属性简写补全、已有代码包裹、自定义缩写等功能，显著提升编码效率。
Emmet 是 VSCode 内置的前端编码加速器，不用安装插件就能用，写 HTML 和 CSS 时能省下大量重复敲键盘的时间。
HTML 快速生成结构
输入缩写再按 Tab 键，就能展开成完整标签。比如：
.container>.header+main+.footer → 展开为带类名的三层结构；
ul>li*5 → 生成含 5 个列表项的无序列表；
img[src="logo.png"][alt="Logo"] → 直接写出带属性的 img 标签。
关键点：
• 缩写语法和 CSS 选择器高度一致，学一次，前后端都受益
• 支持嵌套（>）、并列（+）、重复（*）、属性（[]）等常用操作
• 在 .html 或 .vue 文件的 template 区域中默认生效
CSS 属性自动补全与简写
在 style 标签或 属性里输入简写，Tab 就能转成完整属性。例如：
m10 → margin: 10px;
bd1s#333 → border: 1px solid #333;
d:f;a:c → display: flex; align-items: center;
小技巧：
• 单位默认是 px，加 h 变成 rem（如 w20h → width: 20rem;）
• 颜色支持英文名、hex、rgb 等多种写法，#f00 也能识别
• 连续按 Tab 可循环切换不同单位或格式（如 px/rem/em）
快速修改已有代码
选中一段 HTML，按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 “Emmet: Wrap with Abbreviation”，回车后输入缩写，就能把选中内容包进新结构里。
常见场景：
• 把几行文本快速包进 <div class="card"></div>
• 给多个 <p></p> 加上统一的父容器 <section></section>
• 把内联样式批量转成 class 名（配合 Emmet 的 CSS 缩写更顺滑）
自定义缩写与常用配置
VSCode 允许你添加个人常用缩写。打开设置（Settings），搜索 “emmet variables”，在 Emmet: Variables 中添加键值对，比如：
{"hello": "Hello, World!"} → 输入 hello + Tab 就输出文字
实用建议：
• 在用户设置中开启 Emmet: Include Languages，为 .vue、.jsx 等文件启用 Emmet
• 关闭 Emmet: Show Expanded Abbreviation 可减少悬浮提示干扰
• 常用组件可预设为缩写，如 btn → <button class="btn">$1</button>（$1 表示光标初始位置）
基本上就这些。Emmet 不复杂但容易忽略，每天多用几次，一个月下来写的代码量没变，敲的字符可能少了一半。
