Emmet

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

How Does It Work?
Writing HTML code takes time with all of those tags, attributes, quotes, braces, etc. With Emmet instantly expands simple abbreviations into complex code snippets.


For example:

type "ul>li.item$*5" in your editor and the result is below

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

type "h$[title=item$]{Header $}*3" in your editor and the result is below

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

For more example --> http://docs.emmet.io/cheat-sheet/