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>