Speeding up dev with Emmet

Emmet is a snippet library that is available in most IDEs. My current IDE of choice from frontend work is WebStorm and comes pre installed.

How does this speed up development time?

If like me and you spend most of you day building out html elements to change and build UI. You will be tired of having to write out the full length mark up. Take this simple header structure for example.

<div class="header">
    <div class="logo"></div>
    <div class="nav">
        <ul class="nav-container">
            <li class="nav-item"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
        </ul>
    </div>
</div>

Emmet and its short hands allows you to shorten the time to do this by typing out the following command directly in the IDE and in my case clicking tab afterwards to output the above HTML directly into your code.

.header>div.logo+ul.nav-container>li.nav-item*4>{Item $}

I have now been using Emmet for only 1 month and really do not know how I have survived without ever using it before. Below are the most common I have been using since I started and hope they are useful for you.

Child Element Nesting

div>ul>li

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

Multiple Elements of the same type

ul>li.item*5

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

Adding an addition $ into the mix means you can additionally add index's to the class names for example if you wanted to control each once in css on their own.

ul>li.item-$*5

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

Element with atrribute text

This one has been super useful for working in vue.

div[title="Show me the money"]

<div title="Show me the money"></div>

The list of options is huge and will take a while to master but I also found this really useful cheat sheet online if you would like to learn more.

Cheat Sheet

What other tools or technique do you use to speed up your development process? let me know in the comments section below.