Emmet: Emmet 编辑器集成：VSCode/WebStorm/Sublime 配置实战

好消息是：你可能已经在用支持 Emmet 的编辑器了——VSCode、WebStorm、Atom 默认就开启，零配置就能用。

1. 你将学到

• VSCode 对 Emmet 的支持现状：默认开启、覆盖文件类型
• WebStorm / IntelliJ IDEA 默认开启情况
• Sublime Text、Atom 的插件安装流程
• 自定义 keybinding：Tab vs Ctrl+E 的选择
• Emmet 适用的文件类型与编辑器对照表：.html .css .jsx .tsx .vue

2. 一个前端开发者的真实故事

(1) 痛点：换编辑器就要重新学一遍

Bob 是一名前端开发者，最近换工作入职新公司。入职第一天，团队给他配的电脑预装的是 WebStorm，而不是他之前习惯的 VSCode。Bob 打开 WebStorm 试着敲 div.box 按 Tab，发现完全没反应——他以为 WebStorm 不支持 Emmet，跑去问主管，主管说："WebStorm 是默认开启的，是不是你按错键了？"Bob 一脸懵：原来不同编辑器的 Emmet 触发键不一样，VSCode 是 Tab，WebStorm 也是 Tab，但有些老版本需要按 Ctrl+Alt+Space。他又问同事 Alice 用什么编辑器，Alice 说她用 Sublime Text，"需要先装 Emmet 插件，还要自己改 keybinding，不然 Tab 触发不了"。Bob 心想：如果我换编辑器，每次都要重新配一遍，门槛也太高了。

(2) Emmet 编辑器集成的解法

Emmet 的解法是：几乎所有主流编辑器都原生或通过插件支持 Emmet，但触发方式、文件类型支持、是否需要配置各有不同。Bob 学完本课之后，画了一张表贴在工位上：

有了这张表，Bob 以后再换编辑器，5 分钟就能搞定配置。

(3) 收益

明确编辑器支持状态带来的收益是双重的：一是节省配置时间，不用每次换编辑器都踩坑；二是避开干扰，知道哪些键位是"Emmet 占用"的，避免在不该展开的地方误触发。本课结束后，无论你用哪款编辑器，都能在 5 分钟内让 Emmet 跑起来。

3. 编辑器支持总览

Emmet 的设计目标之一就是"编辑器无关"——同一份缩写 ul>li*3，在 VSCode、WebStorm、Sublime 中展开结果完全一致。区别只在于集成方式和触发方式。

4. 主流编辑器配置实战

下面我们针对三款最常用的编辑器（VSCode、WebStorm、Sublime Text）演示 Emmet 的配置过程。

(1) VSCode：开箱即用

VSCode 对 Emmet 的支持是最完善的。1.0 之后的版本默认开启 Emmet，无需安装任何插件，HTML、CSS 文件直接按 Tab 即可展开。

▶ 示例：VSCode 验证 Emmet（难度⭐）

步骤 1：新建 HTML 文件

# Press Ctrl+N in VSCode to create a new file
# Save it as test.html (VSCode auto-detects the language by extension)

步骤 2：输入 Emmet 缩写

div.container>h1{Hello Emmet}+p.lead{这是 VSCode 中的第一个 Emmet 展开}

步骤 3：按 Tab 键触发

<div class="container">
  <h1>Hello Emmet</h1>
  <p class="lead">这是 VSCode 中的第一个 Emmet 展开</p>
</div>

输出：

一行缩写瞬间展开为 4 行 HTML，光标跳到 h1 内部可以继续编辑。VSCode 的 Tab 键默认是 Emmet 展开键，无需任何配置。

JSX/TSX 文件开启 Emmet（可选）：

// Add to settings.json (Ctrl+Shift+P → "Preferences: Open User Settings (JSON)")
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

(2) WebStorm / IntelliJ：默认开启 Tab 触发

WebStorm 全家桶（IntelliJ IDEA、PyCharm、PhpStorm 等）默认集成了 Emmet 插件，同样无需安装。触发键也是 Tab，但有个细节：WebStorm 的 Tab 在某些场景下会先尝试代码补全（Code Completion），需要按多次 Tab 才能触发 Emmet 展开。

▶ 示例：WebStorm 验证 Emmet（难度⭐）

步骤 1：新建 HTML 文件

# File → New → HTML File → name it test.html

步骤 2：输入简写并按 Tab

ul.nav>li*4>a[href="#"]{菜单 $}

步骤 3：展开结果

<ul class="nav">
  <li><a href="#">菜单 1</a></li>
  <li><a href="#">菜单 2</a></li>
  <li><a href="#">菜单 3</a></li>
  <li><a href="#">菜单 4</a></li>
</ul>

输出：

4 个列表项的导航菜单瞬间生成。如果按 Tab 没有反应，按 `Ctrl+Alt+Space` 强制触发 Emmet 展开（WebStorm 的兜底键位）。

(3) Sublime Text：需装插件

Sublime Text 本身不内置 Emmet，需要通过 Package Control 安装 Emmet 插件。安装之后，默认 keybinding 是 Ctrl+E，而不是 Tab（因为 Tab 在 Sublime 中默认是缩进）。

▶ 示例：Sublime Text 安装 Emmet（难度⭐⭐）

步骤 1：安装 Package Control

# If Package Control is not yet installed:
# 1. Press Ctrl+` to open the console
# 2. Paste the Package Control install code (from https://packagecontrol.io/installation)
# 3. Restart Sublime Text

步骤 2：安装 Emmet 插件

# 1. Press Ctrl+Shift+P to open the command palette
# 2. Type "Package Control: Install Package" and press Enter
# 3. Search for "Emmet" and press Enter to install
# 4. The plugin is enabled automatically after install

步骤 3：使用 Ctrl+E 触发

<!-- Type the abbreviation -->
form>(input[type=email])+(input[type=password])+button{登录}
<!-- Press Ctrl+E (NOT Tab) -->

展开结果：

<form>
  <input type="email">
  <input type="password">
  <button>登录</button>
</form>

输出：

通过 Ctrl+E 触发，3 个表单元素瞬间生成。如果你想改成 Tab 触发，详见下一个示例的自定义 keybinding。

(4) 自定义 keybinding：Tab vs Ctrl+E

很多开发者习惯按 Tab 触发 Emmet，但 Sublime Text、Vim 等编辑器的 Tab 键被其他功能占用。本节展示如何在 VSCode 中把 Emmet 的 Tab 触发扩展到 JSX 文件，或者改成 Ctrl+E。

▶ 示例：VSCode 自定义 Emmet 配置（难度⭐⭐）

场景 A：让 JSX/TSX 文件也支持 Tab 触发

// settings.json
{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue-html": "html",
    "razor": "html"
  }
}

场景 B：把 Emmet 改为 Ctrl+E 触发（与 Sublime 保持一致）

// keybindings.json (Ctrl+Shift+P → "Preferences: Open Keyboard Shortcuts (JSON)")
[
  {
    "key": "ctrl+e",
    "command": "editor.action.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

场景 C：禁用某些文件类型中的 Emmet

// settings.json (to disable Emmet in markdown files)
{
  "emmet.excludeLanguages": ["markdown"]
}

输出：

通过以上配置，你可以根据团队习惯或个人偏好，把 Emmet 触发键改成任何快捷键，也可以精确控制 Emmet 在哪些文件类型中生效。

5. 文件类型自动启用规则

不同编辑器对 Emmet 支持的文件类型略有不同。总体规律是：HTML、CSS 默认全开；JSX/TSX 在 VSCode/WebStorm 默认开，Sublime 需手动开启；Vue、Svelte 等需要额外配置。

❓ 常见问题

📖 小节

• VSCode、WebStorm、Atom 默认开启 Emmet；Sublime Text、Vim 需装插件
• 默认 keybinding 多数是 Tab，但 Sublime Text 是 Ctrl+E，Brackets 是 Ctrl+Alt+Space
• HTML、CSS 文件在所有编辑器中默认支持；JSX/TSX/Vue 通常需要额外配置
• 自定义 keybinding：可在 VSCode 的 keybindings.json 中改写为任意快捷键
• 文件类型白名单：用 emmet.includeLanguages 扩展支持的语种，黑名单用 emmet.excludeLanguages
• JSX 上下文中 Emmet 会把 class 展开为 className（部分编辑器需手动开启）

📝 作业

1. 基础题（难度⭐）：在你当前使用的编辑器中，新建一个 .html 文件，输入 div.container>ul>li*3>a 按默认 keybinding，记录展开结果，并截图保存。
2. 进阶题（难度⭐⭐）：打开你编辑器的设置，查找 Emmet 相关配置项，列出 3 个你之前不知道的配置项（例如触发键、包含语种、排除语种），并写明它们的作用。
3. 挑战题（难度⭐⭐⭐）：如果你常用 JSX/TSX 或 Vue 文件，配置你的编辑器让 Emmet 在这些文件类型中也生效，并写一个一行 Emmet 缩写展开为 JSX 组件的完整示例（包括 props 和事件绑定）。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们