Emmet is an awesome web developer's plugin
I've recently came across a nice little plugin called Emmet.This plugin is basically an awesome Snippets style plugin,
that lets you generate some highly customizable HTML templates in seconds.
Just for example, if you write the following:1
2
<br />
ul.list>lorem6.item*5<br />
And hit the Expand key (depends which you defined, I use ALT+E for instance),
you'll get the following code:
1
2
3
4
5
6
7
<ul class="list">
<li class="item">Lorem ipsum dolor sit amet, consectetur.</li>
<li class="item">Magnam magni consequatur sunt corporis quis?</li>
<li class="item">Commodi eius quod incidunt quis atque!</li>
<li class="item">At, voluptatibus accusamus culpa quidem voluptates.</li>
<li class="item">Adipisci, nisi blanditiis ullam dolor error.</li>
</ul>
Freaky right?
That sounds a bit confusing I know, but trust me, it's genius.
Lets try to clarify the behavior step by step:
- The ul.list creates a "ul" element with the class "list",
which works just like a CSS selector (with an #id as well), and works on all elements. - The > part defines a child element (inside the "ul")
- lorem6 generates a "lorem ipsum" (dummy text) of 6 words
(Emmet recognizes that the element has to be "li" because of the "ul"), - .item gives the class and *5 is the number of items.
Alright, this was a bit of a complex example, however, you could use it for a lot of simple things
that you write over and over (and over..) again as a web developer, for instance:
1
2
<br />
input:t<br />
generates:
1
2
<br />
<input type="text" name="" id=""><br />
(whereas one tab click goes to the name value, and another goes to the id)
You get to auto generate tables (finally!):
1
2
<br />
table+<br />
generates:
1
2
3
4
5
6
<br />
<table><br />
<tr><br />
<td></td><br />
</tr><br />
</table><br />
The Emmet website has loads of videos explaining how it works,
they even have a Cheat Sheet
The plugin is available for Eclipse, Notepad++, Netbeans, Sublime Text, and loads more!
This might give you an extra few yours before the inevitable Carpal Tunnel Syndrome :)