Emmet: Emmet Editor Integration

Good news: you may already be using an editor that supports Emmet — VSCode, WebStorm, and Atom have it enabled by default, with zero configuration required.

1. What You'll Learn

• VSCode's Emmet support: enabled by default, file types covered
• WebStorm / IntelliJ IDEA: default support status
• Sublime Text and Atom: plugin installation steps
• Custom keybindings: Tab vs. Ctrl+E — which to use
• Emmet file type support by editor: .html .css .jsx .tsx .vue

2. A Front-End Developer's Real Story

(1) Pain Point: Relearning Emmet Every Time You Switch Editors

Bob is a front-end developer who recently started a new job. On his first day, the team gave him a computer with WebStorm pre-installed — not the VSCode he was used to. Bob opened WebStorm, typed div.box, pressed Tab... and nothing happened. He assumed WebStorm didn't support Emmet and went to ask his manager, who told him: "WebStorm has it enabled by default. Are you pressing the right key?" Bob was confused — turns out different editors have different Emmet trigger keys. VSCode uses Tab, WebStorm also uses Tab, but some older versions require Ctrl+Alt+Space. He then asked his colleague Alice what editor she used. Alice said Sublime Text, "but you need to install the Emmet plugin first and customize the keybinding — Tab won't work out of the box." Bob thought: if I switch editors, I have to reconfigure everything from scratch every time. That's a pretty high barrier.

(2) Emmet Editor Integration: The Solution

Emmet's answer: virtually all mainstream editors support Emmet natively or via plugins, but the trigger method, file type coverage, and configuration requirements vary. After completing this lesson, Bob made a cheat sheet and pinned it above his desk:

With this cheat sheet, Bob can get Emmet running in any editor within 5 minutes.

(3) Benefits

Knowing your editor's support status brings two benefits: first, it saves configuration time — no more stumbling through setup every time you switch editors. Second, it avoids interference — you'll know which keys Emmet "owns," so you won't accidentally trigger expansion where you don't want it. After this lesson, you'll be able to get Emmet up and running in your editor of choice within 5 minutes.

3. Editor Support Overview

One of Emmet's design goals is editor agnosticism — the same abbreviation ul>li*3 expands identically in VSCode, WebStorm, and Sublime. The only differences lie in how it's integrated and how it's triggered.

Tip: JSX/TSX syntax differs slightly from standard HTML (class is written as className). Some editors need the "Emmet in JSX" option explicitly enabled for correct expansion.

4. Hands-On Configuration for Popular Editors

Below we walk through Emmet setup for the three most commonly used editors: VSCode, WebStorm, and Sublime Text.

(1) VSCode: Works Out of the Box

VSCode has the most comprehensive Emmet support. Versions 1.0 and later have Emmet enabled by default — no plugins needed, just press Tab in HTML or CSS files to expand.

▶ Example: Verify Emmet in VSCode (Difficulty: ★)

Step 1: Create a new HTML file

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

Step 2: Type an Emmet abbreviation

div.container>h1{Hello Emmet}+p.lead{My first Emmet expansion in VSCode}

Step 3: Press Tab to trigger

<div class="container">
  <h1>Hello Emmet</h1>
  <p class="lead">My first Emmet expansion in VSCode</p>
</div>

Output:

One line of abbreviation instantly expands to 4 lines of HTML, with the cursor positioned inside the h1. VSCode's default Tab key works for Emmet expansion with zero configuration.

Enabling Emmet in JSX/TSX files (optional):

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

(2) WebStorm / IntelliJ: Tab Trigger by Default

All JetBrains IDEs (IntelliJ IDEA, PyCharm, PhpStorm, etc.) ship with Emmet integrated — no installation required. The trigger key is also Tab, but there's a nuance: WebStorm's Tab key may first attempt code completion; you may need to press Tab multiple times to trigger Emmet expansion.

▶ Example: Verify Emmet in WebStorm (Difficulty: ★)

Step 1: Create a new HTML file

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

Step 2: Type the abbreviation and press Tab

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

Step 3: Expansion result

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

Output:

A navigation menu with 4 list items generated instantly. If Tab doesn't respond, press `Ctrl+Alt+Space` to force Emmet expansion (WebStorm's fallback keybinding).

(3) Sublime Text: Plugin Required

Sublime Text does not include Emmet by default. You need to install the Emmet plugin via Package Control. After installation, the default keybinding is Ctrl+E (not Tab, since Tab is reserved for indentation in Sublime).

▶ Example: Install Emmet in Sublime Text (Difficulty: ★★)

Step 1: Install 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

Step 2: Install the Emmet plugin

# 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

Step 3: Use Ctrl+E to trigger

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

Expansion result:

<form>
  <input type="email">
  <input type="password">
  <button>Login</button>
</form>

Output:

Trigger with Ctrl+E to generate 3 form elements instantly. To switch to Tab as the trigger key, see the custom keybinding example below.

(4) Custom Keybindings: Tab vs. Ctrl+E

Many developers prefer pressing Tab to trigger Emmet, but editors like Sublime Text and Vim reserve Tab for other functions. This section shows how to extend VSCode's Tab trigger to JSX files — or switch to Ctrl+E.

▶ Example: Customize Emmet Configuration in VSCode (Difficulty: ★★)

Scenario A: Enable Tab trigger for JSX/TSX files

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

Scenario B: Change Emmet trigger to Ctrl+E (matching Sublime)

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

Scenario C: Disable Emmet in specific file types

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

Output:

With the above settings, you can remap the Emmet trigger key to any shortcut that fits your team's habits or personal preference, and precisely control which file types Emmet activates in.

5. File Type Auto-Enable Rules

Each editor supports a slightly different set of file types for Emmet. The general rule: HTML and CSS are fully enabled by default; JSX/TSX is on by default in VSCode/WebStorm but requires manual enable in Sublime; Vue, Svelte, and others need extra configuration.

Tip: If Emmet doesn't respond to Tab in a specific file type, first check your editor's file type association settings to confirm Emmet is enabled for that language.

❓ よくある質問

📖 まとめ

• VSCode, WebStorm, and Atom have Emmet enabled by default; Sublime Text and Vim require a plugin
• The default keybinding is Tab for most editors, but Ctrl+E in Sublime Text and Ctrl+Alt+Space in Brackets
• HTML and CSS files are supported by default in all editors; JSX/TSX/Vue usually need extra configuration
• Custom keybindings: remap to any shortcut via VSCode's keybindings.json
• File type whitelist: extend supported languages with emmet.includeLanguages; blacklist with emmet.excludeLanguages
• In JSX contexts, Emmet may expand class to className (some editors require manual enable)

📝 練習問題

1. Basic (Difficulty: ★): In your current editor, create a new .html file, type div.container>ul>li*3>a, press the default keybinding, record the expansion result, and take a screenshot.
2. Intermediate (Difficulty: ★★): Open your editor's settings, find the Emmet-related configuration options, list 3 options you weren't aware of before (e.g., trigger key, included languages, excluded languages), and describe what each does.
3. Challenge (Difficulty: ★★★): If you frequently use JSX/TSX or Vue files, configure your editor to enable Emmet in those file types. Then write a single Emmet abbreviation that expands to a complete JSX component (including props and event binding).

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて