VSCode内置Emmet支持，通过缩写快速生成HTML/CSS代码。例如ul>li5生成5个列表项，div.container>h1{标题}+p{内容}创建带类名的结构，form>inputtype=text+button[type=submit]{提交}构建表单，header>nav>ul>li3>a[href=#]生成导航菜单；使用>表示嵌套，+表示同级，*表示重复，{}插入文本，[]添加属性；CSS中m10展开为margin:10px，p10为padding:10px，bgc为background-color:#fff，d:n为display:none，trf:rx自动补全带前缀的transform旋转；结合VSCode提示和Ctrl+E（Cmd+E）手动触发，可在JSX、Vue等文件中高效编写，大幅提升前端开发效率。
VSCode 内置了 Emmet 支持，能让你用简短的缩写快速生成完整的 HTML 或 CSS 代码。只要掌握常用语法，就能大幅提升编写前端代码的效率。
HTML 结构：用嵌套与重复快速搭建页面
在 HTML 文件中输入 Emmet 缩写后按 Tab 或 Enter 即可展开。
例如输入以下缩写：
- ul>li*5 → 生成一个包含 5 个列表项的无序列表
- div.container>h1{标题}+p{内容} → 创建带类名的 div，内含标题和段落
- form>input[type=text][placeholder=请输入]+button[type=submit]{提交} → 快速构建表单元素
- header>nav>ul>li*3>a[href=#] → 生成导航菜单结构
使用 > 表示嵌套，+ 表示同级，* 表示重复，{} 插入文本内容，[] 添加属性。
立即学习“前端免费学习笔记（深入）”；
CSS 规则：缩写属性与值一键补全
在 CSS 文件中，Emmet 可快速生成带浏览器前缀或完整声明的样式规则。
- m10 → 展开为 margin: 10px;
- p10 → padding: 10px;
- bgc → background-color: #fff;
- d:n → display: none;
- trf:rx → 添加 transform 旋转（自动带 -webkit- 等前缀）
这些缩写基于 CSS 属性首字母组合，比如 m 是 margin，p 是 padding，trf 是 transform。
提升效率的小技巧
除了基本用法，还可以结合 VSCode 的其他功能进一步提速。
- 输入缩写时会看到 Emmet 提示，直接按 Tab 接受即可
- 在 JSX、Vue、Svelte 等文件中同样支持 Emmet（需确保语言模式正确）
- 通过设置 "emmet.includeLanguages" 可在非标准语言中启用 Emmet
- 用 Ctrl+E（macOS 上是 Cmd+E）可在输入过程中手动触发展开
基本上就这些。熟练使用 Emmet 后，写 HTML 和 CSS 就像打字一样快，而且不容易出错。多练几个常用缩写，很快就能形成肌肉记忆。
