Emmet

Introduction
Profiles

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:

"html" — default output profile.
"xhtml" — the same as "html", but outputs empty elements with closed slash: <br />.
"xml" — default for XML and XSL syntaxes: outputs each tag on a new line with indentation, empty elements are outputted with closing slash: <br/>.
"xml_zen" — the same as "xml", but outputs leaf tags (i.e. tags without nested tags) with additional newline (e.g. <td> is leaf tag in table>tr>td).
"line" — used to output expanded abbreviation without any indentation and newlines.
"plain" — the same as "line", but doesn't move caret.