VSCode Emmet缩写使用指南

Emmet在VSCode中通过缩写提升HTML和CSS编写效率，输入如div、ul>li*3等按Tab生成完整结构，支持嵌套、重复及属性添加，CSS中可展开m10为margin:10px，配合!+Tab生成HTML5骨架，正确配置下适用于React、Vue等项目，大幅提升前端开发速度。

在 VSCode 中使用 Emmet 可以极大提升 HTML 和 CSS 的编写效率。Emmet 本质上是一套缩写系统，输入简短代码后按 Tab 或 Enter 即可生成完整的标签结构。下面介绍常用语法和实用技巧。

基础 HTML 缩写

Emmet 支持通过简单的符号快速生成 HTML 元素：

• div → <div></div>
• p → <p></p>
• ul>li*3 → 生成包含 3 个列表项的无序列表
• header>nav>a[href="#"]{链接} → 嵌套结构并添加属性和文本
• #header → <div id="header"></div>
• .container → <div class="container"></div>
• input[type="text"].form-control → 同时添加 type 和 class

嵌套与重复操作

利用 >、+、* 等符号可以快速构建复杂结构：

悟智写作

易开即用的AI写作平台

54

查看详情

• article>section+aside → article 内并列的 section 和 aside
• section>h2{标题}+p{内容}*3 → 标题加三段内容
• table>tr*2>td*3 → 两行三列的表格骨架
• a[href="index.html" target="_blank"]{跳转} → 带多个属性的链接

CSS 缩写技巧

在 CSS 文件中，Emmet 能将简写属性快速展开：

• m10 → margin: 10px;
• p0 → padding: 0;
• fw → font-weight: bold;
• bgc → background-color: #fff;
• d:n → display: none;
• pos:r → position: relative;

VSCode 中的使用建议

确保 Emmet 正常工作并发挥最大效用：

• 在 HTML 或 CSS 文件中输入缩写后，按 Tab 键触发展开
• 可通过设置启用 JSX 模式：emmet.includeLanguages 添加 "javascript": "javascriptreact"
• 使用 Ctrl+E（macOS: Cmd+E）可手动触发 Emmet 补全
• 支持在 Vue、React 等框架文件中使用，需正确配置语言模式
• 输入 ! + Tab 可快速生成 HTML5 文档结构（html:5）

基本上就这些。熟练掌握 Emmet 缩写后，写前端代码会快很多。多练几次常见组合，自然就记住了。

以上就是VSCode Emmet缩写使用指南的详细内容，更多请关注php中文网其它相关文章！