Emmet 是 VSCode 内置的高效编码工具，支持 HTML/CSS 缩写快速生成代码，如 ul>li*5 生成无序列表、m10 展开为 margin: 10px;，并可通过设置自定义触发行为与语言支持。
Emmet 是 VSCode 内置的高效编码工具，无需额外安装插件，开箱即用。它通过简短的缩写（Abbreviation）快速生成结构化 HTML 和 CSS 代码，大幅减少重复敲击。
HTML 缩写：一行写出完整结构
在 HTML 文件中输入缩写后按 Tab（或 Enter，取决于设置），即可展开为标准 HTML 片段。
- ul>li*5 → 生成含 5 个 li 的无序列表
- div.container>h1+p{Hello}+a[href=#]{Click} → 生成带类名、标题、段落和链接的嵌套结构
- img[src=logo.png alt=Logo][width=200] → 快速写出带多个属性的 img 标签
CSS 缩写：属性自动补全与值推导
在 CSS 或 style 属性中输入缩写，按 Tab 即可展开为完整声明，并智能补全常用值。
-
m10 →
margin: 10px; -
bd1s#333 →
border: 1px solid #333; -
w100p →
width: 100%;（p表示 percent） -
trf:rx45 →
transform: rotate(45deg);
自定义 Emmet 行为（可选但实用）
VSCode 默认已启用 Emmet，但你可以微调以更贴合习惯：
立即学习“前端免费学习笔记（深入）”；
- 在设置中搜索 emmet，勾选 Emmet: Trigger Expansion on Tab 确保 Tab 键生效
- 如需在 JSX/TSX 中使用，添加配置：
"emmet.includeLanguages": {"javascript": "html", "typescriptreact": "html"} - 禁用特定文件类型（如 Markdown）的 Emmet：在设置中添加
"emmet.excludeLanguages": ["markdown"]
小技巧提升效率
掌握几个快捷操作，让 Emmet 更顺手：
- 输入 ! + Tab → 快速生成 HTML5 文档骨架（
<!DOCTYPE html>...</html>） - 选中文本后输入 W + Tab → 包裹选中内容（Wrap with Abbreviation），比如选中文字后输入
span.red，回车即包裹为<span class="red">...</span> - 在 CSS 中连续输入多个缩写（用空格分隔），再一起按 Tab，如
m10 p20 c#f00→ 展开为三行样式
基本上就这些。Emmet 不复杂但容易忽略细节，熟练后写页面结构和样式几乎不用伸手离开主键盘区。
