VSCode Emmet缩写加速前端开发的全套工作流

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;

这些缩写省去频繁输入完整属性名的时间，尤其适合重设样式或快速布局。

松果AI写作

专业全能的高效AI写作工具

53

查看详情

智能编辑与反向操作

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 后，写静态结构几乎不用手动闭合标签，开发节奏明显加快。关键是多练常用缩写，让它变成肌肉记忆。

以上就是VSCode Emmet缩写加速前端开发的全套工作流的详细内容，更多请关注php中文网其它相关文章！