How to Use Emmet in VS Code for HTML and CSS

Emmet is a powerful developer tool built directly into Visual Studio Code that dramatically accelerates HTML and CSS workflows. By using simple abbreviations and expanding them into full code snippets, Emmet allows developers to write complex markup and stylesheets in a fraction of the time. This article explains how Emmet works in VS Code, highlights essential shortcuts for HTML and CSS, and shows you how to configure its settings for maximum productivity.

How Emmet Works in VS Code

In Visual Studio Code, Emmet is enabled by default for HTML, XML, CSS, SCSS, Less, and JSX/TSX files. You do not need to install any external extensions to use it.

To use Emmet, you simply type a specific shorthand abbreviation in your editor and press the Tab or Enter key. VS Code detects the abbreviation and instantly expands it into complete, structured code.

Essential Emmet Shortcuts for HTML

Emmet uses syntax inspired by CSS selectors to generate HTML structures quickly. Here are the most common syntax patterns:

1. Child and Sibling Operators

Child (>): Places elements inside other elements.
- Abbreviation: div>ul>li
- Output:
```
<div>
    <ul>
        <li></li>
    </ul>
</div>
```
Sibling (+): Places elements adjacent to each other.
- Abbreviation: h1+p
- Output:
```
<h1></h1>
<p></p>
```

2. Multiplication and Grouping

Multiplication (*): Generates multiple instances of an element.
- Abbreviation: ul>li*3
- Output:
```
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

Grouping (()): Groups parts of an abbreviation to build complex structures.

Abbreviation: div>(header>ul>li*2)+footer

Output:

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer></footer>
</div>

3. Attributes, Classes, and IDs

ID and Class Selector (# and .): Assigns IDs and classes. If you omit the tag name, Emmet defaults to a div.
- Abbreviation: section#hero.bg-blue
- Output: <section id="hero" class="bg-blue"></section>
- Abbreviation: .container
- Output: <div class="container"></div>
Custom Attributes ([]): Adds custom attributes to elements.
- Abbreviation: input[type="email" placeholder="Enter your email"]
- Output: <input type="email" placeholder="Enter your email">

4. Text and Numbering

Text Node ({}): Adds text inside elements.
- Abbreviation: a{Click Here}
- Output: <a href="">Click Here</a>

Item Numbering ($): Numbers elements sequentially when used with multiplication.

Abbreviation: ul>li.item-$*3

Output:

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

Essential Emmet Shortcuts for CSS

In CSS, Emmet uses fuzzy search and short letter sequences to generate full properties and values instantly.

1. Layout and Display

df expands to display: flex;
db expands to display: block;
dn expands to display: none;
posa expands to position: absolute;

2. Box Model (Margin, Padding, and Dimensions)

Emmet automatically interprets trailing numbers as pixel values: * m10 expands to margin: 10px; * p10-20 expands to padding: 10px 20px; * w100 expands to width: 100px; * h100p expands to height: 100%; (adding ‘p’ outputs percentage)

3. Typography and Colors

tac expands to text-align: center;
fs18 expands to font-size: 18px;
fwb expands to font-weight: bold;
bgc expands to background-color: #fff;

Configuring Emmet Settings in VS Code

You can customize how Emmet behaves in VS Code by accessing your Settings (Ctrl + , on Windows/Linux, Cmd + , on macOS) and searching for “Emmet”.

Enable Emmet in React, Vue, and Other Languages

By default, Emmet might not expand in JSX, TSX, or Vue templates using the Tab key. You can force VS Code to recognize Emmet in these files by adding the following to your settings.json file:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescriptreact": "typescriptreact",
    "vue": "html"
}

Enable Trigger on Tab

If Emmet does not expand when you press Tab, ensure the following setting is enabled in your settings.json:

"emmet.triggerExpansionOnTab": true