Increasing coding rate: Emmet and its use in VSCode

Emmet is a text editor utility that makes writing and editing code easier and faster. Originally the word "Emmet" meant an ant - a small insect that can carry 50 times its weight. To use Emmet, you need to download and install the plugin for the text editor you are using. A list of all plugins is available on the official site. If you are using Visual Studio Code, then you do not need to install the plugin, it is already built in.

Abbreviations

Abbreviations are special expressions that are converted into a structured block of code. Many editors also create tab marks that you can use to quickly navigate between important places in the generated code using the Tab key.

Emmet doesn't have a predefined set of tag names, you can write any word and convert it to a tag: div ➡️ <div> </div>, foo ➡️ <foo> </foo>, and so on. Conversion occurs by pressing a key. This is usually the Tab key. In VSCode, to do the conversion when you press the Tab key, add the following setting:

"emmet.triggerExpansionOnTab": true

Creating a basic html structure

To create a basic html structure, write the ! and press Tab. As a result, the file will be filled with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Nesting operators

Nesting operators are used to position elements within the generated tree.

Child element

The > operator allows you to nest one element within another.

div>ul>li

⬇️

<div>
    <ul>
        <li></li>
    </ul>
</div>

Adjacent element

The + operator allows you to place items next to each other on the same level.

div+p+bq

⬇️

<div></div>
<p></p>
<blockquote></blockquote>

Multiplication

The * operator allows you to define how many times the item should be displayed.

ul>li*3

⬇️

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping

Parentheses allow you to highlight individual subtrees in the abbreviation.

div>(header>ul>li*2>a)+footer>p

⬇️

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

You can nest groups within each other and repeat them using the multiplication operator.

(div>dl>(dt+dd)*3)+footer>p

⬇️

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Operator Attributes

You can specify attributes for the displayed elements.

Specifying class and id

Operator . allows you to specify a class. The # operator allows you to specify an id.

div#header+div.page+div#footer.class1.class2.class3

⬇️

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Arbitrary attributes

Square brackets allow you to set arbitrary attributes on an element.

td[title="Hello world!" colspan=3]

⬇️

<td title="Hello world!" colspan="3"></td>

Arbitrary attributes have the following properties:

A space is used to separate attributes.
If you do not specify a value for the attribute, then its value will be an empty string with a tab label (if your editor supports tab labels).
You can use single or double quotes to indicate attribute values.
You do not need to quote attribute values unless they contain spaces.

Numbering

The $ operator allows you to create numbering. Place the $ operator after the element name, attribute name, or attribute value:

ul>li.item$*3

⬇️

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

In fact, the $ operator can be placed anywhere in the name.

ul>li.ite$m*2

⬇️

<ul>
  <li class="ite1m"></li>
  <li class="ite2m"></li>
</ul>

You can use multiple $ operators in a row to pad a number with zeros:

ul>li.item$$$*3

⬇️

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

Initial value and direction of numbering

The @ modifier allows you to change the direction of numbering (ascending or descending) and the initial value. To change the direction of numbering, add the @- modifier after the $ operator:

ul>li.item$@-*3

⬇️

<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

To change the initial value of the counter, add the @N modifier to the $ operator:

ul>li.item$@3*5

⬇️

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

You can use these modifiers together:

ul>li.item$@-3*5

⬇️

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Adding text

Curly braces allow you to add text to an element.

a{Click me}

⬇️

<a href="">Click me</a>

Implicit tag names

In many cases, you can omit the tag name. For example, instead of div.content, you could write .content, which translates to <div class="content"></div>. Emmet looks at the parent tag every time you expand an abbreviation without a tag name. If the parent element is a block element, then the div tag will be selected, otherwise it will be a span. There are a few exceptions to this:

li for ul and ol
tr for table, tbody, thead and tfoot
td for tr
option for select and optgroup

"Lorem Ipsum" generator

The abbreviations "lorem" and "lipsum" generate random text. Each time you perform an abbreviation data transformation, a 30-word text is generated, split into multiple sentences.

lorem

⬇️

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et hic incidunt repellat, quos veritatis a tenetur deserunt accusantium ab ad adipisci ex rerum distinctio corrupti omnis asperiores, numquam exercitationem sapiente.

You can specify how many words should be generated. For example, lorem10 will generate a 10 word text. You can also use the repetition operator * to create multiple elements with random text.

ul>li*3>lorem10

⬇️

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, temporibus.</li>
  <li>Earum totam eius repudiandae sit optio, consectetur ipsum officiis enim?</li>
  <li>Ex, molestias. Minima ducimus quaerat et earum commodi natus autem?</li>
</ul>

Adding abbreviations and fragments

Some abbreviations are converted to elements with predefined attributes. You can see the list of such abbreviations for different languages in the official repository in the snippets folder. For example, the abbreviations for html are in the html.json file. You can find out how to add abbreviations in the plugin documentation for the text editor you are using. If you are using Visual Studio Code, then you need to create a snippets.json file. There can be several such files, for example, one with global settings, and another with local ones at the project level. Then, in your VSCode settings file, add the emmet.extensionsPath parameter containing an array of paths to the folders containing the snippets.json file. Let's look at an example. Create a folder .vscode in the current project. In the .vscode folder create the settings.json and snippets.json files. Here's how to do it through the terminal:

mkdir .vscode && cd .vscode
touch settings.json && touch snippets.json

In the settings.json file write the following:

{
  "emmet.extensionsPath": ["./.vscode"]
}

The snippets.json file records aliases and snippets for each language. At the moment, VSCode uses Emet 2.0. In this version, abbreviations and fragments are set using a single parameter snippets. Let's create some abbreviations for html and css:

{
  "html": {
    "snippets": {
      "abbr1": "ul>li*3",
      "abbr2": "ol>li*3"
    }
  },
  "css": {
    "snippets": {
      "clw": "color: white",
      "clb": "color: black"
    }
  }
}

For details on creating abbreviations and snippets in VSCode, see the official documentation.