Emmet


Introduction

Emmet is a plugin (install it via "Addons Manager"), it gives you set of abbreviations that lets you write HTML and CSS very fast. It's easy to understand and saves a lot of time. There are several sets of abbreviations: HTML (active by default), CSS (active for lexers CSS, LESS, SCSS, SASS, Stylus and for HTML-based lexers when you're inside "style" part), XSL (active for lexers XML, XSLT).

Here are some examples to give an impression how Emmet works.

Example 1

Text to write in editor: p*3
Now expand this abbreviation by Emmet command. You will get the following code:
<p></p>
<p></p>
<p></p>

Multiplications can be used for almost all abbreviations.

Example 2

Text to write in editor: table>tr*2>td
After expanding you will get this code:
<table>
   <tr>
     <td></td>
   </tr>
   <tr>
     <td></td>
   </tr>
</table>

Example 3

Text to write in editor: select>option#item-$*3
After expanding you will get this code:
<select>
    <option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>
</select>

Profiles

You can change active Emmet profile using plugin command. The following profiles are available: