Sublime怎么使用Emmet插件_Sublime前端开发神器Emmet快捷指令表

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 即可展开：

NameGPT

免费的名称生成器，AI驱动在线生成企业名称及Logo

68

查看详情

立即学习“前端免费学习笔记（深入）”；

• 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 缩写后，写页面结构就像打字一样快，真正实现“手还没动完，代码已生成”。

以上就是Sublime怎么使用Emmet插件_Sublime前端开发神器Emmet快捷指令表的详细内容，更多请关注php中文网其它相关文章！