Sublime Text 通过 Package Control 安装 Emmet 插件后，可大幅提升前端开发效率，支持 HTML/CSS/JSX 文件中的快捷缩写，如 html:5 生成 HTML5 结构、m10 转换为 margin: 10px，结合 >、+、^ 等嵌套操作符与 $ 序号生成功能，实现快速编码。
Sublime Text 是前端开发者常用的编辑器之一，搭配 Emmet 插件后，编写 HTML 和 CSS 的效率会大幅提升。Emmet 提供了一套简洁的缩写语法，输入后按 Tab 键即可快速生成完整的代码结构。
安装 Emmet 插件
Sublime Text 安装 Emmet 非常简单，推荐通过 Package Control 来安装：
- 按下 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P）打开命令面板
- 输入 “Install Package” 并选择 “Package Control: Install Package”
- 等待列表加载完成后，搜索 “Emmet” 并点击安装
安装完成后无需重启，即可在 HTML、CSS、JSX 等文件中使用 Emmet 缩写。
常用 Emmet 快捷指令表
以下是一些高频使用的 Emmet 指令示例，输入后按 Tab 即可展开：
立即学习“前端免费学习笔记（深入）”；
HTML 常用缩写- html:5 → 生成 HTML5 文档结构
- ! 或 !!! → 同上，快速生成 html 模板
- div.container → 创建一个 class 为 container 的 div
- ul>li*5 → 创建 ul 包含 5 个 li 子项
- a[href=#] → 创建 a 标签并设置 href 属性
- img[src=logo.png alt=Logo] → 快速插入带属性的图片
- section#header → 创建 id 为 header 的 section 元素
- p{Hello World} → 创建 p 标签，内容为 Hello World
- div>p>span → 创建 div 包含 p，p 内包含 span
- m10 → margin: 10px;
- mt20 → margin-top: 20px;
- mb5 → margin-bottom: 5px;
- fs14 → font-size: 14px;
- lh20 → line-height: 20px;
- bgsz → background-size: 100% 100%;
- d:n → display: none;
- pos:a → position: absolute;
- t0 r0 b0 l0 → top/right/bottom/left 均设为 0
实用技巧与注意事项
- 确保当前文件语法模式正确（如 HTML 或 CSS），否则 Emmet 可能不生效
- 可以组合使用缩写，例如：.container>ul.nav>li.item*3>a{链接$}，其中 $ 会被替换为序号
- 使用 $* 可重复多个字符，如 li.item$$$*3 → item001, item002, item003
- 支持嵌套操作符：+（同级）、>（子级）、^（提升一级）
- 在 JSX 文件中使用时，建议将文件设为 JavaScript React 语法模式以启用 Emmet 支持
基本上就这些。熟练掌握 Emmet 缩写后，写页面结构就像打字一样快，真正实现“手还没动完，代码已生成”。
