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. We support the official version of Emmet.

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