Sublime Text中安装Emmet插件可大幅提升前端开发效率，通过Package Control搜索并安装Emmet后，无需重启即可使用；在HTML中输入缩写如div、header.container或ul>li*3，按Tab键快速生成标签结构，支持类、ID、嵌套与兄弟元素；CSS中m10展开为margin:10px，pos:a变为position:absolute，并能用trf生成带前缀的transform属性；需确保文件类型正确，可通过Ctrl+E手动触发补全，熟练掌握后显著提升编码速度。
Sublime Text 是前端开发者常用的轻量级代码编辑器，而 Emmet 插件能极大提升 HTML 和 CSS 的编写效率。通过简单的缩写语法，可以快速生成完整的标签结构，节省大量重复编码时间。
安装 Emmet 插件
Emmet 可以通过 Sublime Text 的插件管理工具 Package Control 来安装，步骤如下：
- 确保已安装 Package Control。如果未安装，可在官网找到安装命令，通过 Sublime 的控制台（Ctrl + `）粘贴执行。
- 按下 Ctrl + Shift + P 打开命令面板，输入 “Install Package” 并选择对应选项。
- 在搜索框中输入 “Emmet”，点击安装即可。
安装完成后无需重启，插件会自动生效。
Emmet 基本使用方法
Emmet 支持 HTML 和 CSS 文件中的快捷输入，常用语法包括：
立即学习“前端免费学习笔记（深入）”；
- 元素生成：输入 div 后按 Tab，自动生成 <div></div>。
- 类与 ID：输入 header.container 按 Tab，生成 <header class="container"></header>；#title 生成带 ID 的标签。
- 嵌套结构：使用 > 表示父子关系，如 ul>li*3 生成包含 3 个列表项的无序列表。
- 兄弟节点：用 + 连接多个同级元素，例如 h1+p 生成标题和段落。
- 属性与内容：使用 () 添加文本内容，如 a[href="#"]{点击这里} 生成带链接和文字的锚点。
在 CSS 中的高效输入
Emmet 在 CSS 编辑中同样强大：
- 输入 m10 按 Tab，可展开为 margin: 10px;。
- pos:a 展开为 position: absolute;。
- 支持 vendor prefixes，如 trf 可生成带浏览器前缀的 transform 属性。
注意事项与技巧
- 确保文件类型正确设置为 HTML 或 CSS，否则 Emmet 可能不触发。
- 可通过 Ctrl + E 手动触发 Emmet 补全（部分版本适用）。
- 自定义 Emmet 配置可在菜单 Preferences → Package Settings → Emmet 中进行。
基本上就这些。熟练掌握 Emmet 后，写前端结构就像打字一样快。不复杂但容易忽略细节，多练几次就能形成肌肉记忆。
