PhpStorm and the Brilliance of Emmet

I have a man-crush on the IDEs made by intelliJ, because they are clearly build from the principle that makes great software: know your customers very well and anticipate exactly what they want to do, then make that easy.

Case in point, Emmet, an HTML shorthand (also with a cheat sheet). HTML is of course everywhere and while it is not as bad as XML it is still rather verbose. This is especially the case for things like tables. For example if I need to make a table with 5 headers this would need something like this

| | | | |
| --- | --- | --- | --- |

Whereas with Emmet I can just write this:

 table\>tr\>th\*4 

Then all I have to do is position the key at the end of the line and press “tab” – of course PhpStorm also positions your cursor at the first of table header elements.

It is even possible to surround already existing code with by selecting it, choosing “Surround with Live Template” from the menu, “Emmet” from the popup menu and then writing something like this:

 ol\>li.item$\>{$#} 

If you do that with the following three lines and the first as the selected “code”:

 first choice  
second choice  
third choice  
 

Then Emmet will expand $# with the text you have selected, $ with a one based count and the entire thing is going to be:

1. first choice
second choice third choice 

Which almost certainly isn’t what you want. The trick is to the multiplier (*) that we used earlier but without specifying how many times it should be replaced. Thus if you select all the lines and type:

 ol\>(li.item%\>{$#})\* 

Then what you end up with is:

1. first choice
2. second choice
3. third choice

Which is what you want.

Emmet also makes it very easy to specify classes. In the table example from earlier we could have written:

 table.data#income\>tr\>th\*4 

In this case it would have created a table with a class name of data and an id of income. If we wanted a div we can even skip the tag name and just do something like:

which expands to: