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

Child: >Nest elements inside each other.Sibling: +Place elements next to each other.Climb-up: ^Move up one level in the HTML output.Multiplication: *Define how many times element should be repeated.Grouping: ()Group subtrees in complex abbreviations.ID and ClassUse the #id and .class syntax to add these attributes.Custom attributesUse [attr] syntax to set custom attributes.Item numbering: $Out the specific index of each element when using the multiplication operator
Previous ArticleNext Article