如何在SublimeText中启用Emmet插件？加速HTML/CSS开发的教程

看不見的法師

发布时间：2025-09-03 12:23:01

832人浏览过

来源于php中文网

原创

答案：通过Package Control安装Emmet并确保文件类型正确即可启用。具体步骤为：先安装Package Control，再通过它搜索并安装Emmet插件，重启Sublime Text后测试缩写展开功能。若未生效，需检查插件是否安装成功、文件语法设置是否正确、是否存在快捷键冲突，必要时可重装插件或更新软件版本。此外，Emmet支持高级功能如包裹元素、自定义片段和过滤器，可大幅提升前端开发效率。配合Autoprefixer、ColorPicker、LiveReload等插件，能进一步优化工作流。

如何在sublimetext中启用emmet插件？加速html/css开发的教程

在Sublime Text中启用Emmet插件，其实远比你想象的要简单直接。核心步骤就是通过Package Control安装Emmet，然后确保你的文件类型被正确识别。一旦配置妥当，你就能立即体验到它在HTML和CSS开发中带来的飞速提升。

解决方案

启用Emmet插件的整个过程，对我来说，就像是给Sublime Text装上了一对翅膀，尤其是在处理前端代码的时候。我记得最初接触它时，那种敲几个字符就能生成一大段代码的惊喜感，至今难忘。下面是具体的步骤：

安装Package Control (如果尚未安装): 这是Sublime Text生态系统的基石，几乎所有插件的安装都离不开它。
- 打开Sublime Text。
- 按下
```
Ctrl+Shift+P
```
  (Windows/Linux) 或
```
Cmd+Shift+P
```
  (macOS) 打开命令面板。
- 在弹出的输入框中输入
```
Install Package Control
```
  。通常，当你输入几个字母后，它就会自动补全。
- 选中并回车，等待Sublime Text完成安装。它会提示你安装成功。
通过Package Control安装Emmet: 有了Package Control，安装Emmet就变得轻而易举了。
- 再次按下
```
Ctrl+Shift+P
```
  (或
```
Cmd+Shift+P
```
  ) 打开命令面板。
- 输入
```
Package Control: Install Package
```
  并回车。
- 等待几秒钟，直到一个新的输入框出现，显示可用的插件列表。
- 在这个输入框中输入
```
Emmet
```
  。
- 选中
```
Emmet
```
  并回车。Sublime Text会在后台自动下载并安装插件。你可以在Sublime Text底部的状态栏看到安装进度。
重启Sublime Text (推荐): 虽然很多时候插件安装后会立即生效，但我个人习惯性地会重启一下Sublime Text。这能确保所有配置都被正确加载，避免一些奇怪的小问题。
测试Emmet: 现在，你可以打开一个HTML或CSS文件（或者新建一个，并将其保存为
```
.html
```
或
```
.css
```
文件，或者通过
```
View > Syntax > Open All With Current Extension As... > HTML
```
来设置语法高亮）。
- 在HTML文件中，输入
```
div>ul>li*3
```
  然后按下
```
Tab
```
  键。如果一切正常，它会立即展开成：
```
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
```
- 在CSS文件中，输入
```
mt10
```
  然后按下
```
Tab
```
  键。它应该会展开成：
```
margin-top: 10px;
```
  如果能顺利展开，恭喜你，Emmet已经成功运行了！

为什么我的Emmet在Sublime Text里没反应？常见故障排除与优化技巧

这绝对是我刚开始使用Emmet时最常遇到的问题之一，那种期待着Tab键展开代码却毫无反应的失落感，相信不少人都经历过。别急，我们一步步来排查。

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

首先，最直接的检查点就是确认Emmet是否真的安装成功了。你可以再次打开命令面板 (

Ctrl+Shift+P

)，输入

Package Control: List Packages

并回车。在弹出的列表中，你应该能找到

Emmet

这一项。如果找不到，那显然是安装出了问题，需要重新执行安装步骤。

再者，文件类型识别是Emmet能否工作的关键。Emmet不是万能的，它只会在它“认识”的文件类型中工作。比如，你在一个没有设置语法的纯文本文件里敲

div

再按

Tab

，它肯定不会有反应。确保你的文件语法高亮被设置为HTML、CSS、JS等Emmet支持的语言。你可以通过

View > Syntax

来检查或更改当前文件的语法设置。我有时会忘记给新文件保存或设置语法，结果就以为Emmet坏了，其实只是我自己粗心。

另一个常见问题是按键冲突。Sublime Text本身有很多快捷键，你安装的其他插件也可能有自己的快捷键，这些都可能和Emmet的

Tab

键展开功能产生冲突。虽然Emmet的

Tab

键冲突相对较少，但也不是不可能。如果怀疑是按键冲突，可以尝试在

Preferences > Key Bindings

中搜索

expand_abbreviation

看看有没有其他绑定。不过，通常情况下，Emmet会优先处理。

如果以上都检查过了，Emmet还是不工作，我通常会尝试重启Sublime Text。这听起来有点“万金油”，但很多时候，它确实能解决一些莫名其妙的配置加载问题。如果重启无效，那么可以考虑重新安装Emmet。先通过

Package Control: Remove Package

卸载Emmet，然后像第一次那样重新安装。

最后，如果你在使用一些比较老旧的Sublime Text版本，或者Emmet插件版本过旧，也可能导致兼容性问题。保持Sublime Text和Emmet插件的更新，是一个良好的习惯。

Emmet不仅仅是缩写：深入挖掘其高级功能与自定义配置

很多人觉得Emmet就是

div

Tab

，或者

mt10

Tab

，但实际上，它的强大远不止于此。在我看来，真正掌握Emmet，意味着你要去探索那些能让你的编码效率再上一个台阶的高级功能和自定义选项。

我最喜欢 Emmet 的地方，除了基础的元素缩写，就是它的父子、兄弟、乘法组合。比如

header>nav>ul>li*5>a{链接 $}

，这一下就能生成一个带导航链接的完整头部结构，而且每个链接的文本还能递增。这种组合能力，让我想象力有多丰富，代码就能生成多快。

还有包裹功能 (Wrap with Abbreviation)，通常是

Ctrl+Shift+G

(Windows/Linux) 或

Cmd+Shift+G

(macOS)。当你选中一段文本或多行代码时，按下这个快捷键，输入一个Emmet缩写，比如

div.wrapper

，它就能把选中的内容用

div

包裹起来，并且加上

wrapper

类。这在重构或者快速添加容器时简直是神来之笔。

社研通

文科研究生的学术加速器

下载

Emmet还提供了过滤器 (Filters)。比如在HTML中，你可以使用

html:5

来快速生成HTML5的基本骨架。或者在CSS中，

lorem

就能生成一段随机的Lorem Ipsum文本，这在填充占位内容时非常方便。

对于更高级的用户，自定义Emmet片段 (Custom Snippets)是必不可少的。Emmet允许你通过修改配置文件来添加自己的缩写。这通常涉及到编辑

Emmet.sublime-settings

文件。你可以在

Preferences > Package Settings > Emmet > Settings - User

中打开它。在这里，你可以定义自己的常用代码块缩写，比如我经常会定义一些项目特有的组件缩写，这样团队协作时也能保持一致性。举个例子，你可以在

preferences.json

中添加类似这样的配置：

{
    "snippets": {
        "html": {
            "snippets": {
                "mycard": "<div class=\"card\"><div class=\"card-header\"></div><div class=\"card-body\"></div></div>"
            }
        }
    }
}

这样，你在HTML文件中输入