Emmet

Emmet speeds up your HTML & CSS workflow

Parcel integrates Emmet into the editor. Emmet allows you to type CSS-like expressions that are expanded to HTML.

Abbreviations

Abbreviations let you very quickly create blocks of code that would otherwise be tedious to manually type. For example, typing

div>div>table>tr*3>tr>a

hit tab and this becomes:

<div>
<div>
<table>
<tr>
<tr><a href=""></a></tr>
</tr>
<tr>
<tr><a href=""></a></tr>
</tr>
<tr>
<tr><a href=""></a></tr>
</tr>
</table>
</div>
</div>

You can learn more about abbreviations in the official documentation.

Examples

Below are examples of how to use the Emmet plugin.

Child: >

table>tr>td

Becomes...

<table>
<tr>
<td></td>
</tr>
</table>

Sibling: +

a+a+a

Becomes...

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

Multiplication: *

table>tr*3>td*2

Becomes...

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

IDs and class

a#my-link.text-blue

Becomes...

<a href="" id="my-link" class="text-blue"></a>

Emmet Syntax Documentation