Emmet插件可显著提升Sublime Text前端开发效率。通过缩写语法快速生成HTML/CSS代码，安装需先具备Package Control，再通过命令面板搜索并安装Emmet，重启后即可使用。在HTML中输入缩写如div.container、ul>li*5、a[href=#]或!，按Tab键展开为完整结构；CSS中pos:a、m10、bd1#0等缩写也能自动补全为完整样式声明。使用时需确保文件语法模式正确，可通过Ctrl+E手动触发扩展，支持嵌套操作与自定义snippets。熟练掌握常用缩写可大幅提升编码速度，形成肌肉记忆。
Emmet插件是Sublime Text中提升前端开发效率的核心工具之一。它通过缩写语法快速生成完整的HTML或CSS代码，极大减少重复书写。安装后只需输入简短指令，按Tab键即可展开为结构化代码，适合日常开发中的高频操作。
安装Emmet插件
确保已安装Package Control。按下Ctrl+Shift+P打开命令面板，输入“Install Package”，回车后搜索“Emmet”，选择安装即可。安装完成后无需额外配置，重启Sublime Text即可使用。
HTML中使用Emmet缩写
在HTML文件中，输入缩写后按Tab键展开。常用示例如下：
- div.container →
- ul>li*5 → 生成包含5个li项的无序列表
- a[href=#] → 自定义属性写法，生成带href的链接
- ! → 快速生成HTML5文档基本结构
CSS中快速编写样式
在CSS文件里，Emmet同样支持属性缩写。输入简写后按Tab自动补全完整声明：
立即学习“前端免费学习笔记（深入）”；
- pos:a → position: absolute;
- m10 → margin: 10px;
- bd1#0 → border: 1px solid #000;
常用技巧与注意事项
部分场景需注意语法细节：
- 确保文件语法模式正确（如HTML或CSS），否则缩写不生效
- 使用Ctrl+E可手动触发Emmet扩展（Windows/Linux）
- 支持嵌套操作，如.wrap>.inner+.sidebar生成并列结构
- 可通过自定义snippets进一步扩展常用模板
基本上就这些。熟练掌握Emmet后，写前端结构的速度会明显提升，尤其适合搭建页面骨架或重复组件。多练几次常用缩写，很快就能形成肌肉记忆。
