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