Tuesday, July 23, 2013

Emmet.io: The Best Dang Html Coding Plugin

Every once in a while I come across a plugin that really knocks my socks off by how impressed I am. It isn't often, but it can happen. Emmet is one of those plugins. Emmet is basically a code generation tool for turning short css type expressions into full blown html/xml.

For example say you want a an unordered list with 15 list items.  It would a pain to do it by hand, or maybe you would cut and past the <li> elements, but with Emmet it is pretty straightforward.

Using your favorite text editor, because Emmet is available for just about everything, you simply type in ul>li*15, hit Ctrl+e to expand it, and you end up with
Of course, that is only the beginning of what you can do. Want to add id and classes? How about ul#idsRock>li.andSoDoClasses*15. This generates...
Or maybe you want some dummy text in those list items? ul#idsRock>li.andSoDoClasses*15>lorem5 will give us 5 words of dummy text, although truthfully I wish the lorem generator went off character count instead of word count, but nonetheless that will generate...

Emmett also has a bunch of other features that I've never played with like css templates and other ways to customize it. They all sound neat but I haven't had the gumption to fiddle around with it that deeply.

Links: Emmet.io Documentation Their Blog

No comments:

Post a Comment