VSCode Emmet缩写与HTML/CSS快速开发

Emmet是VSCode前端开发提速核心工具，通过缩写快速生成HTML/CSS代码。输入div按Tab生成<div></div>，.container生成带class的div，#header生成带id的div，ul>li*5生成5个列表项，form:post创建POST表单，a[href="#"]{点击这里}生成链接；CSS中pos展开为position: relative，fw→font-weight: bold，m10→margin: 10px，bd1#0→border: 1px solid #000，bgc→background-color: #fff，z→z-index: 1；启用Emmet需在设置中开启Tab触发，支持JSX/Vue需添加语言映射，Ctrl+E（Cmd+E）可快速扩展，结合自动补全提升效率，熟练后编写结构如打字般流畅。

VSCode 中的 Emmet 是前端开发提速的核心工具之一。它允许你通过简短的缩写快速生成完整的 HTML 或 CSS 结构，大幅减少重复敲击键盘的时间。只要掌握常用语法，编写页面结构和样式几乎可以“一气呵成”。

HTML 中的 Emmet 缩写用法

在 VSCode 的 HTML 文件中输入 Emmet 缩写后，按下 Tab 或 Enter 键即可展开为完整标签。

• 输入 div 按 Tab → 生成 <div></div>
• 输入 .container → 生成 <div class="container"></div>
• 输入 #header → 生成 <div id="header"></div>
• 输入 ul>li*5 → 生成一个包含 5 个列表项的无序列表
• 输入 form:post → 快速创建以 POST 提交的 form 标签
• 输入 a[href="#"]{点击这里} → 生成带文本和 href 的链接

CSS 中的 Emmet 快捷方式

在 CSS 文件中，Emmet 同样支持属性缩写，输入后按 Tab 即可补全。

• 输入 pos → 展开为 position: relative;
• 输入 fw → font-weight: bold;
• 输入 m10 → margin: 10px;
• 输入 bd1#0 → border: 1px solid #000;
• 输入 bgc → background-color: #fff;
• 输入 z → z-index: 1;（或自动递增）

提升效率的实用技巧

VSCode 对 Emmet 做了深度集成，结合设置和快捷键能进一步提升体验。

快写红薯通AI

快写红薯通AI，专为小红书而生的AI写作工具

57

查看详情

立即学习“前端免费学习笔记（深入）”；

• 确保设置中启用了 Emmet：打开设置搜索 "emmet"，确认 Emmet: Trigger Expansion on Tab 已开启
• 在 JSX、Vue 等文件中使用 Emmet：需在设置中添加语言映射，如将 javascriptreact 加入 Emmet 支持列表
• 使用 Ctrl+E（macOS: Cmd+E）快速扩展当前缩写
• 输入时利用自动补全建议，VSCode 会提示可能的 Emmet 缩写

基本上就这些。熟练使用 Emmet 后，写 HTML 结构像打字一样快，写 CSS 也不再是重复劳动。关键是多练常用缩写，让它成为肌肉记忆。不复杂但容易忽略。

以上就是VSCode Emmet缩写与HTML/CSS快速开发的详细内容，更多请关注php中文网其它相关文章！