Emmet 是 VSCode 内置的 HTML/CSS 快速编码工具，无需安装，启用后支持缩写展开、CSS 属性补全、自定义变量及代码包裹等高效功能。
emmet 是 vscode 中提升 html 和 css 编写速度的“隐形加速器”，不用它，写结构就像手敲自行车；用了它，几秒就能生成一整段带嵌套、带类名、带属性的代码。
安装与基础启用
VSCode 默认已内置 Emmet，无需额外安装插件。只需确认设置中开启即可：打开 设置（Ctrl+,） → 搜索 emmet → 确保 Emmet: Enabled 为开启状态。HTML/CSS/SCSS/JSX 等常用语言默认支持，如需在其他文件类型中启用，可在 Emmet: Include Languages 中添加映射，例如："vue": "html" 或 "markdown": "html"。
核心缩写语法：从一行变一屏
在 HTML 文件中输入缩写后按 Tab（或 Enter，取决于设置），即可展开。常见用法包括：
- div.container>ul>li*5 → 生成带容器的 5 项列表
- section#hero.hero-section.bg-blue-500+p.text-lg → 带 ID、多个 class、后续兄弟元素
- a[href="https://example.com"]{Click me} → 带属性和文本内容
- .card*3^section.main → 生成 3 个 card，再跳出层级插入 main section
CSS 快速补全：告别拼错 margin-left
在 CSS/SCSS 文件中，输入简写即可自动补全完整属性：
- m10 → margin: 10px;
- pb2 → padding-bottom: 2px;
- bgc#ff0 → background-color: #ff0;
- d:fjcb → display: flex; justify-content: center; align-items: baseline;
支持链式缩写，也兼容 Tailwind 类名风格（需配合插件如 Emmet Tailwind CSS 可增强体验）。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：自定义与效率叠加
想让 Emmet 更贴合团队规范？可以：
- 在 settings.json 中配置 emmet.variables，比如定义 "lang": "zh-CN"，然后用 html:5 直接生成带中文声明的 HTML5 模板
- 用 Emmet: Wrap with Abbreviation（选中代码 → 右键或 Ctrl+Shift+P）把已有内容包裹进新结构，比如把几行文字快速包进
- 禁用干扰提示：若 CSS 补全太频繁，可关闭 Emmet: Show Expanded Abbreviation，保持清爽
基本上就这些。熟练后，你会觉得删掉 Emmet 就像关掉键盘背光——不是不能写，只是突然觉得世界暗了一点。
