Using Emmet in Sublime Text

A Quick Guide to Emmet in Sublime Text

December 17, 2015 by Masuga

Originally written by James H.

Emmet is an IDE agnostic toolkit that adds an amazing amount of functionality to many of the most popular text editors around, using simple CSS-like syntax. I used to use PHPStorm exclusively, but have been trying out Sublime Text 3 recently and really like a lot of the features, but some additional shortcuts would make me much more productive. Here’s how easy it is to get started with Emmet in Sublime Text 3:

Nesting

Nesting with Emmett is very intuitive to someone who uses CSS regularly. Separate each element with >.
Type this: div>p>b and you will output

<div>
    <p>
        <b></b>
    </p>
</div>

Siblings

Coding siblings is the same basic idea as nesting, this time separate each element with a +.

Type this: div+p+b and you will output:

<div></div>
<p></p>
<b></b>

Multiplication

To create a nested list with X components, add a *X to your nesting syntax, X being the number of lunch items.

Try this: ul>li*3 and you will output:

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

ID/Classes

Marking up tags with ID and class information is also intuitive. After the desired tag, add a # or . (period) to create an ID or class respectively.

Type this: div#head+div.page+div#foot.class1.class2 and you will output:

<div id="head"></div>
<div class="page"></div>
<div id="foot" class="class1 class2"></div>

Custom Attributes

Putting custom attributes is slightly different than ID and classes. After the tag, add [x="Hello world!"] to add that attribute and its related text.

Type this: <em>td[title="Hello world!" colspan=3]</em> and you will output:

<td title="Hello world!" colspan="3"></td>

Number Iteration

To iterate your class names in a list, use the same idea as multiply with a $ to indicate using an incremental variable.

Type this: ul>li.item$*3 and you will output:

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
</ul>

Fast Links

This is probably the most useful feature of Emmett that I use every single day. After autocompleting, your cursor will step through the href field and then the text field, unless you specify the text.

Type this: a{Click} and you will output:

<a href="">Click</a>

Lorem Ipsum

Another extremely useful feature. Emmett can generate Lorem Ipsum text inside your structure for you.

Type this: ul.generic-list>lorem10.item*3 and you will output:

<ul class="generic-list">
   <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
   <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
   <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
</ul>

More Basic Key Commands

A more elaborate cheat sheet can be found here, but these are a few very useful operations.

Balancing

Can expand or shrink your selection tag by tag using ⌘+D, ⌘+shft+D.

Smarter Commenting

⌘+/ comments everything surrounded by the current tag you have selected instead of just the lines you have selected.

Go To Matching Tag Pair

⌘+T goes back and forth between starting and closing tags.

Split/Join Tag

⌘+J adds the necessary closing tag or removes it.

Merge Lines

⌘+⇧+M merges several lines of code into one unwrapped row.

Evaluate Math

⌘+⇧+Y lets you crunch numbers in your CSS, so if you want to make something twice as big, let Emmet do the math for you!

Fuzzy Search

Rather than learn every snippet shortcut for tags, Emmet will try to autocomplete any abbreviated tags for you. You can customize these snippets in snippet.js easily, for chunks of code you are going to reuse over and over. This makes coding both HTML and CSS very easy.

Why Should I Use Emmet?

Emmet is an amazing tool that does so much for the more minimal IDE’s out there. It utilizes CSS-like syntax that any web developer should be familiar with, along with some simple shortcuts that add a lot of useful selection tools. Emmet also adds a lot of more complex tools, like snippet creation, and allowing you to create your own abbreviations for autocompletion. I only covered the basics of this tool, so go forth and experiment! This tool has revolutionized the way I make HTML templates, and I guarantee it will increase your productivity from right out of the box. It's easy to use, robust, and makes me feel OK with leaving PHPStorm behind…for now.

You Might Also Like

More from Masuga Design

Subscribe to receive our newsletter.