Emmet 是 VSCode 内置工具，通过缩写快速生成 HTML/CSS 代码。输入如 html:5、div.container>ul>li5>a 等缩写后按 Tab 即可展开为完整结构，支持子元素（>）、同级（+）、重复（）等符号。CSS 中 m10 转换为 margin: 10px；bgc 生成 background-color: #fff，提升样式编写效率。还可使用 Wrap with Abbreviation 包裹元素，Shrink 尝试反向折叠，配合多光标批量编辑。通过 settings.json 配置可启用 JSX 支持并开启 Tab 触发，熟练后显著提升开发速度。
Emmet 是 VSCode 内置的强大工具，能将简短的缩写快速展开为完整的 HTML 或 CSS 代码，极大提升前端开发效率。只要掌握常用语法和工作流，写页面就像打字一样快。
HTML 快速生成结构
在 .html 文件中输入 Emmet 缩写后按 Tab 或 Enter 即可展开。
常用缩写示例：
- html:5 → 完整的 HTML5 文档结构
- div.container>ul>li*5>a → 创建带类名的 div，内含 5 个列表项，每项包含链接
- form#searchForm>(input:text+input:submit) → 表单包含文本框和提交按钮
- table>tr*3>td*4 → 生成 3 行 4 列的表格
利用 >（子元素）、+（同级）、*（重复）和 #/.（id/类），能快速搭建页面骨架。
立即学习“前端免费学习笔记（深入）”；
CSS 高效编写样式
在 CSS 或 SCSS 文件中，Emmet 同样支持属性缩写。
例如：
- m10 → margin: 10px;
- p5-10 → padding: 5px 10px;
- bgc → background-color: #fff;
- d:n → display: none;
- pos:a → position: absolute;
这些缩写省去频繁输入完整属性名的时间，尤其适合重设样式或快速布局。
智能编辑与反向操作
Emmet 不只是展开，还能反向折叠和批量修改。
常用编辑技巧：
- 选中一段 HTML 标签，输入 Ctrl+Shift+P → Emmet: Wrap with Abbreviation，可将其包裹在新结构中
- 使用 Ctrl+Shift+A 可快速选择当前标签内容区域
- 在已展开的代码上右键 → “Emmet: Shrink” 可尝试还原为原始缩写（部分支持）
配合多光标（Alt+点击）和选择扩展（Ctrl+D），实现批量修改类名、标签类型等操作。
自定义配置提升适配性
通过 VSCode 设置可调整 Emmet 行为。
在 settings.json 中添加：
{
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"
}
这样可以在 JSX 中使用 Emmet，并确保 Tab 键始终触发展开。
基本上就这些。熟练使用 Emmet 后，写静态结构几乎不用手动闭合标签，开发节奏明显加快。关键是多练常用缩写，让它变成肌肉记忆。
