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
嵌套与重复操作
利用 >、+、* 等符号可以快速构建复杂结构：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 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 缩写后，写前端代码会快很多。多练几次常见组合，自然就记住了。
