安装并使用emmet插件可大幅提升sublime中html和css编写效率。1. 安装需先确保package control已安装，再通过命令面板搜索并安装emmet，重启生效；2. 输入简写如!后按tab键可生成完整html5结构；3. 缩写如div.container>ul>li*3可快速生成嵌套元素；4. css中输入m10或p0 m0 auto可自动展开为完整样式规则；5. 使用时需注意文件类型正确、快捷键可自定义、支持嵌套与运算但应兼顾代码可读性。
在 sublime 中使用 Emmet 插件，可以让你飞快地写出 HTML 和 CSS 代码。它通过简写语法自动生成结构完整的代码片段，特别适合前端开发时快速搭建页面骨架。如果你还没用上这个插件，那真的有点浪费时间了。
安装 Emmet 插件
要在 Sublime 上使用 Emmet，首先得确认你已经安装好了 Package Control。如果没有的话，建议先去官网查一下安装方法。有了 Package Control 后，按下 Ctrl+Shift+P 打开命令面板，输入 Install Package Control 确保它已安装。
接着再次打开命令面板，输入 Install Package，然后搜索 Emmet 并安装。安装完成后，重启一下 Sublime 就可以开始用了。
立即学习“前端免费学习笔记（深入）”；
快速生成 HTML 结构
Emmet 的一大亮点就是能用简单的缩写生成一整套 HTML 结构。比如你想创建一个基本的页面结构，只需要输入：
!
然后按下 Tab 键，就会自动生成完整的 HTML5 模板，包括 、、
和 标签。
再比如，输入：
div.container>ul>li*3
按 Tab 键后会变成：
<div class="container"> <ul> <li></li> <li></li> <li></li> </ul> </div>
这种写法非常适合快速搭建页面布局，省去了手动一个个敲标签的时间。
编写 CSS 也能提速
Emmet 不仅对 HTML 友好，写 CSS 时也能帮你节省不少时间。例如，输入：
m10
按下 Tab 键后，就会自动展开为：
margin: 10px;
再比如：
p0 m0 auto
展开后是：
padding: 0; margin: 0 auto;
这些缩写非常贴近日常写法，而且容易记住，熟练之后写样式就像打字一样自然。
常见技巧和注意事项
- 确保文件类型正确：Emmet 的行为会根据当前文件类型（HTML 或 CSS）有所不同。如果发现不生效，检查一下右下角是否设置成了正确的语言模式。
- 快捷键可以自定义：默认是 Tab 键触发，但如果你觉得冲突或者想改成别的键，可以在 Emmet 设置里调整。
- 支持嵌套和数学运算：比如 ul>li.item$*5 会生成带编号的列表项；w=100/3 可以自动计算宽度值。
- 兼容性考虑：虽然 Emmet 很强大，但不要过度依赖缩写。团队协作时，保持代码可读性也很重要。
基本上就这些。Emmet 是个很实用的小工具，功能不算复杂，但确实能提升不少效率。刚开始可能需要适应一下它的语法习惯，一旦熟悉了，你会发现写前端代码真的快了不少。
