How to Use Emmet in VS Code to Write HTML and CSS Faster

Emmet is a built-in VS Code feature that expands short abbreviations into full HTML and CSS. You type a CSS selector-like expression, press one key, and VS Code produces the complete markup or style.

No extension is required. Emmet is active by default in HTML, CSS, SCSS, Less, JSX, XML, Pug, Haml, and Slim files. For more on VS Code editing features, see how to use multiple cursors. If you want to create your own abbreviations, check out custom code snippets.

Your first abbreviation

Open an HTML file. Type ! and press Tab or Enter. VS Code expands it into a full HTML5 document skeleton.

Now type ul>li*5 and expand it.

html

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

The expression means an unordered list containing a list item, repeated 5 times.

Essential Emmet syntax

Emmet abbreviations use a small set of operators. Learn these and you can produce most markup:

You can combine these freely. This expression creates a div with an ID, containing a list with three numbered items and links:

text

div#page>ul>li.item-$*3>a{Link $}

Auto-numbering with $

The $ symbol increments with each repetition.

Use two dollar signs for two-digit padding, like 01 or 02. Use $@- to count down. This example creates three image tags with padded numbers:

html

<img src="photo-01.jpg" alt="">
<img src="photo-02.jpg" alt="">
<img src="photo-03.jpg" alt="">

Lorem ipsum text

Emmet also expands the word lorem into placeholder text. Add a number for word count, like lorem5 for 5 words. Combine it with multiplication, like p*3>lorem5, to produce 3 paragraphs of 5 words each.

CSS abbreviations

Emmet works the same way in CSS files. Type a shorthand and expand it:

CSS abbreviations use fuzzy search. Typing pos:a matches position: absolute, and pos:r matches position: relative. The part before the colon matches a property name, and the part after matches a value.

Expand abbreviations

There are three ways to expand an Emmet abbreviation:

The suggestion list shows a live preview of the expanded abbreviation in the documentation panel. This helps you verify the output before you commit.

Wrap existing text with Emmet

Select some text, open the Command Palette, and run Emmet: Wrap with Abbreviation. Type your abbreviation and press Enter. The selected text is placed inside the expanded structure.

For example, select three lines of text and wrap with ul>li*:

html

<ul>
    <li>First selected line</li>
    <li>Second selected line</li>
    <li>Third selected line</li>
</ul>

Enable Emmet in other file types

To use Emmet in JSX inside .js files, in Vue single-file components, or in other file types where it is not active by default, add the emmet.includeLanguages setting:

json

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html",
  "plaintext": "pug"
}

The left side is the language ID of the file you are editing. The right side is the Emmet-supported language whose syntax rules to use.

Emmet with multiple cursors

Emmet abbreviations can be expanded independently at each cursor. Place multiple cursors across different lines, type the same abbreviation at each one, and expand. Every cursor gets its own expansion. Combined with auto-numbering, this is a fast way to generate repeated but varied markup.

Customize Emmet output

Add to your settings to control how abbreviations expand:

json

"emmet.syntaxProfiles": {
  "html": {
    "attr_quotes": "single"
  }
}

This changes all HTML attribute quotes from double to single.

Useful abbreviation reference

The full reference is available at the Emmet Cheat Sheet.