Enhance Your Front-End Web Dev Workflow With Emmet, which is built in to WebStorm, IDEA, and Microsoft VS Code.

Posted on Mar 10, 2017 (last modified May 7, 2021)

Did you know that Emmet’s built-in to WebStorm, IDEA, and Microsoft VS Code? Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that imply the HTML structure you want and have the IDE spit out the desired HTML.

Try It!

Here’s a simple example of a basic expression in the Emmet syntax. Try typing the following in an HTML page in your IDE. If your using VS Code, you simply hit ENTER or RETURN after the expression. If you’re using an IntelliJ product like WebStorm or IDEA, you have to press TAB after the expression.

ul>li*10

At the end of the expression, just hit the Tab key. WebStorm will use Emmet to parse the text and spit out the intended HTML which, in this case, will be an unordered list with 5 list items (shown below):

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

For details, you can refer to the Emmet Documentation, but for convenience, I’m including the most common stuff below. There’s a lot more to it though, so if you like what you see here, be sure to RTFM.

Emmet Syntax

Nesting

You can use > operator to nest elements inside each other:

div>ul>li

Result:

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

Sibling

Use + operator to place elements near each other, on the same level:

div+p+bq

Result:

<div></div>
<p></p>
<blockquote></blockquote>

Multiplication

With * operator you can define how many times element should be outputted:

ul>li*5

Result:

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

Grouping

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

div>(header>ul>li*2>a)+footer>p

Result:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.

You can nest groups inside each other and combine them with multiplication * operator.

ID and CLASS

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:

div#header+div.page+div#footer.class1.class2.class3

Result:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Custom attributes

You can use [attr] notation (as in CSS) to add custom attributes to your element:

td[title="Hello world!" colspan=3]

Result:

<td title="Hello world!" colspan="3"></td>

Item numbering

With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:

ul>li.item$*5

Result:

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

You can use multiple $ in a row to pad number with zeroes:

ul>li.item$$*5

Result:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Text

You can use curly braces to add text to element:

a{Click me}

Result:

<a href="">Click me</a>

Greek Text

You know – that filler text that designers use when they can’t think of real words that are relevant to a design…

lorem5

Result:

Lorem ipsum dolor sit amet.

Holy shit example

Here’s a crazy example to give you an idea of what you can accomplish if you get bad ass with Emmet.

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$*10>div.navMenuIcon{Item $}+a{Item $}

Result:

<nav id="menuSystem" class="navMenu isOpen">
   <div id="hotelLogo">
      <div class="navMenuIcon logoIcon"></div>
      <div id="arrowPointer"></div>
      <ul id="navMenuMain">
         <li class="navMenuItem navMenuItem001">
            <div class="navMenuIcon">Item 1</div>
            <a>Item 1</a></li>
         <li class="navMenuItem navMenuItem002">
            <div class="navMenuIcon">Item 2</div>
            <a>Item 2</a></li>
         <li class="navMenuItem navMenuItem003">
            <div class="navMenuIcon">Item 3</div>
            <a>Item 3</a></li>
         <li class="navMenuItem navMenuItem004">
            <div class="navMenuIcon">Item 4</div>
            <a>Item 4</a></li>
         <li class="navMenuItem navMenuItem005">
            <div class="navMenuIcon">Item 5</div>
            <a>Item 5</a></li>
         <li class="navMenuItem navMenuItem006">
            <div class="navMenuIcon">Item 6</div>
            <a>Item 6</a></li>
         <li class="navMenuItem navMenuItem007">
            <div class="navMenuIcon">Item 7</div>
            <a>Item 7</a></li>
         <li class="navMenuItem navMenuItem008">
            <div class="navMenuIcon">Item 8</div>
            <a>Item 8</a></li>
         <li class="navMenuItem navMenuItem009">
            <div class="navMenuIcon">Item 9</div>
            <a>Item 9</a></li>
         <li class="navMenuItem navMenuItem010">
            <div class="navMenuIcon">Item 10</div>
            <a>Item 10</a></li>
      </ul>
   </div>
</nav>