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:

#page>div.logo+ul#navigation>li*5>a{Item $}

into that:

<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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Emmet Power User Meetup
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.