Emmet! • Geekpulp

Whatever your text editor of choice (I just can’t quit you Atom) there is a wide range of plugins to enhance its capabilities. One such plugin that I use constantly is Emmet.

Emmet can be used for a number of things, but where it really shines is speeding up my HTML production. Emmet uses a CSS like syntax to quickly produce common HTML code.

The most common situations I find myself using it is when I initially create an HTML document. To do this you just type ! and hit tab. The result will be:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body></body>
</html>

Perhaps most useful of all is adding repetitive blocks of HTML like lists. Just type ul>li.lego{Awesome}*10 then hit tab and you’ll get:

<ul>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
</ul>

Or you can get super fancy and nest all sorts of things. Give something like this a go. Type div.awesome>(header>ul>li.item$*5>a{Awesome thing $})+footer>p{Awesome} and hit tab. Boom you get:

<div class="awesome">
  <header>
    <ul>
      <li class="item1"><a href="">Awesome thing 1</a></li>
      <li class="item2"><a href="">Awesome thing 2</a></li>
      <li class="item3"><a href="">Awesome thing 3</a></li>
      <li class="item4"><a href="">Awesome thing 4</a></li>
      <li class="item5"><a href="">Awesome thing 5</a></li>
    </ul>
  </header>
  <footer>
    <p>Awesome</p>
  </footer>
</div>

As you can see, once you learn the basic structure, everything is awesome with Emmet.