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

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