Extra Emmet Tricks

Emmet is awesome ‘cuz it makes typing HTML and CSS so much easier. Just type a small Emmet snippet, hit the Tab key, and boom! It’ll automagically type out a big chunk of code for you. But I came across this blogpost that reveals some extra hidden tricks.

First things first. If you’re a web developer and you’re not using Emmet, oh my word! You best download it to your favorite text editor and get acquainted with it right now. Don’t worry; I’ll wait.

Got it? Good.

Like I was saying, Emmet’s hidden tricks are:

• Inline calculation
• Jumping to a tag’s matching pair
• Typing comments in closing tag
• Converting an image into a Data URI

Personally I was stoked about Emmet’s built-in ability to type a comment in the closing tag by just adding “|c” to the end of your Emmet snippet (much faster than manually clicking and typing the comment). According to the blogpost,

…Emmet makes it easier to write comments beneath closing tags by adding a tiny snippet to the end of an abbreviation. Typing:

.container>ul>li*5>a|c

expands to:

<div class="container">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>
<!-- /.container -->

Check out the full blogpost for more on the other tricks. Emmet for the win!

Emmet’s hidden power features | Jordanm.co.uk