The 4 Emmet Commands you should learn

If you are writing HTML as part of your daily work you know that it can be tedious. Without additional tooling, editing and changing the sometimes very deep hierarchies, trying to maintain a proper indendation will be a lot of work moving your cursor around, selecting blocks of code.

Emmet is a set of commands and a shortway notation to help with that and is supported by a lot of text editors in the form of plugins that let you integrate it and bind it to custom keys. For example it can turn you typing this:

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

While that is impressive, I don't think it is its strongest feature. I have found I am using the editing shortcuts much more frequently.

Looking at the Emmet docs can be a bit overwhelming and daunting to get started with. This is my personal bare minimum of commands you may want to learn. I am using them inside Sublime using the emmet-sublime plugin, so depending on your text editor the exact naming etc. may differ:

Wrap with Abbreviation: Select some html block and call this action to automatically wrap and indent it into a new tag or even a nested html structure. The syntax supports adding classes etc. on the fly.
Balance (Outward/Inward): A very quick way to select the nearest meaningful block of html from your current cursor position. Repeated outward calls expand the selection, inward shrinks it. Great for indenting, copy-pasting, removing blocks.
Rename Tag / Update Tag: This doesn't seem to be part of the official Emmet specs, but is implemented in some text editors (Sublime, VSCode, Atom). Lets you change a tag's start and end brackets on the fly, e.g. converting a span to a div.
Remove Tag: Remove a tag, re-indenting its wrapped contents as expected. Great to purge those unneeded divs.

Of course there is a lot more to learn, but these I have found to be boosting my productivity a lot.

Home

July 27, 2018, 3 min read

The 4 Emmet Commands you should learn