Emmet在VSCode中通过缩写提升前端编码效率，输入!生成HTML5结构，div.container创建带类元素，>和+实现嵌套与并列，ahref{文本}添加属性内容，CSS中m10展为margin:10px，w100转width:100px，配合设置优化可全面提升开发速度。
在使用 VSCode 编写前端代码时，Emmet 是一个非常强大的工具，能显著提升 HTML 和 CSS 的编写效率。它通过缩写语法，一键生成完整的代码结构，省去重复敲击标签的时间。
HTML 中的 Emmet 常用缩写
在 HTML 文件中输入 Emmet 缩写后，按下 Tab 或 Enter 键即可展开为完整代码。
-
生成基本结构：输入
!或html:5，快速生成 HTML5 文档骨架。 -
创建带类或 ID 的元素：
div.container→<div class="container"></div>nav#main-nav→<nav id="main-nav"></nav> -
嵌套结构：
header>nav>ul>li*3>a会生成三级嵌套的列表结构，其中*3表示生成 3 个li元素。 -
父子与兄弟关系：
使用>表示嵌套，+表示并列。section>p+p生成一个 section 包含两个并列的 p 标签。 -
添加属性和文本：
a[href="#"][title="链接"]{点击这里}会生成带属性和链接文字的 a 标签。
CSS 中的 Emmet 缩写技巧
在 CSS 文件中，Emmet 同样可以快速写出常见样式规则。
-
属性缩写：
输入m10展开为margin: 10px;fw→font-weight: bold;posr→position: relative; -
尺寸与颜色：
w100→width: 100px;bgs#f→background-color: #fff; -
生成多条样式：
输入m10+p5+dib可一次性生成 margin、padding 和 display 三条规则。
VSCode 中的 Emmet 设置优化
确保 Emmet 在 VSCode 中高效运行，可以进行以下设置调整。
立即学习“前端免费学习笔记（深入）”；
- 打开设置（Ctrl + ,），搜索 Emmet: Include Languages，可将其他语言（如 JSX）关联到 Emmet 支持。
- 启用 Emmet: Trigger Expansion on Tab，这样在任意上下文按 Tab 都能触发展开。
- 在
settings.json中添加自定义快捷键或排除特定文件类型。
熟练掌握 Emmet 缩写后，编写页面结构和样式会变得极其流畅。建议多加练习常用缩写组合，逐步形成肌肉记忆。基本上就这些，不复杂但容易忽略细节。
