VSCode内置Emmet支持，通过简短缩写快速生成HTML和CSS代码。输入!+Tab可生成HTML5结构，使用>、+、*实现嵌套、同级与重复元素，#和.添加id与class，ahref{文本}可添加属性与内容；CSS中pos、m10等缩写展开为完整属性，支持单位输入如mt20px，flex布局fxd、jcc、aic等提升样式编写效率；配合Ctrl+E转换当前行、Enter展开及自定义配置，显著加快页面骨架与样式开发速度。
VSCode 内置了 Emmet 支持，能极大提升 HTML 和 CSS 的编写效率。只要输入简短的缩写，按 Tab 或 Enter 就能生成完整的代码结构，特别适合快速搭建页面骨架或样式规则。
HTML 中的 Emmet 用法
在 .html 文件中，Emmet 可以将简洁的表达式转换为完整的标签结构。
• 输入 ! 然后按 Tab，快速生成 HTML5 文档结构：
! → <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
• 使用 > 表示嵌套，+ 表示同级元素，* 表示重复：
div>ul>li*3 → <div> <ul> <li></li> <li></li> <li></li> </ul> </div>
• 用 # 添加 id，. 添加 class：
div.container#main → <div class="container" id="main"></div>
• 添加属性和内容也很方便：
a[href="#"][title="Link"]{点击这里} → <a href="#" title="Link">点击这里</a>
CSS 中的 Emmet 缩写技巧
在 .css 文件中，Emmet 提供了大量属性缩写，减少重复输入。
• 输入属性前缀即可展开：
pos → position: relative; m10 → margin: 10px; p5 → padding: 5px; db → display: block; fl → float: left
• 支持带单位的数值：
mt20px → margin-top: 20px; w100p → width: 100%; h50em → height: 50em
• 快速生成 flex 布局相关样式：
fxd → flex-direction: row; jcc → justify-content: center; aic → align-items: center;
提高效率的小技巧
除了基本用法，掌握这些操作能让编码更流畅。
立即学习“前端免费学习笔记（深入）”；
• 在任意 HTML 标签内按 Ctrl+E（macOS 为 Cmd+E），可将当前行转为 Emmet 缩写再展开。
• 输入缩写后，除了 Tab，也可以用 Enter 触发展开（取决于设置）。
• VSCode 支持自定义 Emmet 配置，在 settings.json 中可添加新缩写或启用 JSX 支持。
基本上就这些。熟练使用 Emmet 后，写 HTML 结构和 CSS 样式会快很多，尤其在搭建原型或组件时特别省时间。不复杂但容易忽略。
css vscode html js json html5 编码 mac ai macos flex布局 cos json html5 css html class flex vscode macos