15.08.2021 18:10
nightzen 23 14000 Источник

Emmet - это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово "Emmet" означало муравей - маленькое насекомое, которое может нести в 50 раз больше своего веса. Чтобы использовать Emmet, нужно скачать и установить плагин для используемого текстового редактора. Список всех плагинов доступен на официальном сайте. Если вы используете Visual Studio Code, то устанавливать плагин не нужно, он уже встроен.

Аббревиатуры

Аббревиатуры - это специальные выражения, которые преобразуются в структурированный блок кода. Во многих редакторах также создаются метки табуляции, по которым вы можете быстро перемещаться между важными местами сгенерированного кода с помощью клавиши Tab.

У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div → <div></div>, foo →​ <foo></foo> и так далее.  Преобразование происходит по нажатию клавиши. Обычно это клавиша Tab. В VSCode, чтобы выполнять преобразование по нажатию клавиши Tab, добавьте следующую настройку:

{
  "emmet.triggerExpansionOnTab": true
}

Создание базовой структуры html

Для создания базовой структуры html напишите символ ! и нажмите клавишу Tab. В результате файл заполнится следующим содержимым:

<!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>

Операторы вложенности

Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.

Дочерний элемент

Оператор > позволяет вкладывать один элемент в другой:

div>ul>li→

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

Соседний элемент

Оператор + позволяет разместить элементы рядом друг с другом на одном уровне:

div+p+bq→

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

Повторение

Оператор * позволяет определить, сколько раз должен выводиться элемент:

ul>li*3→​

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

Группировка

Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:

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>

Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения:

(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>

Атрибуты операторов

Вы можете указать атрибуты для выводимых элементов.

Указание класса и id

Оператор . позволяет указать класс. Оператор # предназначен для указания 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>

Произвольные атрибуты

Квадратные скобки позволяют задавать элементу произвольные атрибуты:

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

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

Произвольные атрибуты имеют следующие особенности:

  1. Для разделения атрибутов используется пробел.

  2. Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).

  3. Можно использовать одинарные и двойные кавычки для указания значений атрибутов.

  4. Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.

Нумерация

Оператор $ позволяет создавать нумерацию. Для этого поместите данный оператор после имени элемента, имени атрибута или значения атрибута:

ul>li.item$*3→

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

Оператор $ можно поместить в любом месте имени:

ul>li.ite$m*2→

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

Вы можете использовать несколько операторов $ подряд, чтобы дополнить номер нулями:

ul>li.item$$$*3→

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

Начальное значение и направление нумерации

Модификатор @ позволяет изменить начальное значение и направление нумерации (по возрастанию или убыванию). Чтобы изменить направление нумерации, добавьте модификатор @- после оператора $:

ul>li.item$@-*3→

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

Чтобы изменить начальное значение счетчика, добавьте модификатор @N к оператору $:

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>

Вы можете изменить начальное значение счетчика и направление нумерации одновременно:

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>

Добавление текста

Фигурные скобки позволяют добавить текст в элемент:

a{Перейти}→

<a href="">Перейти</a>

Неявные имена тегов

Во многих случаях можно не писать имя тега. Например, вместо div.content вы можете написать .content, что преобразуется в <div class="content"></div>. Emmet смотрит на родительский тег каждый раз, когда вы расширяете аббревиатуру без имени тега. Если родительcкий элемент является блочным, то будет выбрать тег div, в противном случае — span. При этом есть несколько исключений:

  1. li для ul и ol.

  2. tr для table, tbody, thead и tfoot.

  3. td для tr.

  4. option для select и optgroup.

Генератор "Lorem Ipsum"

Аббревиатуры "lorem" и "lipsum" генерируют случайный текст. Каждый раз, когда вы выполняете преобразование данных аббревиатур, генерируется  текст из 30 слов, разбитый на несколько предложений.

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.

Вы можете указать количество генерируемых слов. Например, lorem10 сгенерирует текст из 10 слов. Также, вы можете использовать оператор повторения *, чтобы создать несколько элементов со случайным текстом:

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>

Добавление аббревиатур и фрагментов

Некоторые аббревиатуры преобразуются в элементы с предустановленными атрибутами. Список таких аббревиатур для различных языков вы можете посмотреть в официальном репозитории в каталоге snippets. Например, аббревиатуры для html находятся в файле html.json.

Способ добавления аббревиатур вы можете узнать в документации плагина, который используете в текстовом редакторе. Если используется Visual Studio Code, то вам нужно создать файл snippets.json. Таких файлов может быть несколько, например, один с глобальными настройками, а другой с локальными на уровне проекта. Затем, в файле настроек VSCode, добавьте параметр emmet.extensionsPath, содержащий массив путей к каталогам, содержащим файл snippets.json. Рассмотрим на примере: создайте каталог .vscode в текущем проекте. В каталоге .vscode создайте файлы settings.json и snippets.json. Вот как это сделать через терминал:

  1. mkdir .vscode && cd .vscode

  2. touch settings.json && touch snippets.json

В файл settings.json добавьте следующую настройку:

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

В файле snippets.json для каждого языка записываются его псевдонимы и фрагменты. На данный момент в VSCode используется Emmet 2.0. В данной версии аббревиатуры и фрагменты задаются через один параметр snippets. Создадим несколько аббревиатур для html и css:

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

Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.

Комментарии (23)


  1. mSnus
    15.08.2021 19:26
    #23373118
    +2

    Отличная шпаргалка. Добавил бы только, что для ввода 

    <div class="one"></div>

    достаточно просто набрать .one, без тега. Это очень удобно, когда набрасываешь каркас HTML.


    1. nightzen Автор
      15.08.2021 22:35
      #23373652

      Добавил в статью более подробное описание этого момента.


  1. Alexufo
    15.08.2021 19:27
    #23373124

    Pug же есть


    1. mSnus
      15.08.2021 21:33
      #23373476

      Он сложнее и все же для другого.


      1. Alexufo
        15.08.2021 21:58
        #23373552
        +1

        Так наоборот проще же!)
        Так же для верстки он и идет. Хранит данные изначально в меньшем виде, все переделки делаются проще. Учить ничего не надо, просто не пишешь html а только html сущности

        .header
   nav
     ul
        li ляляля
        li ляляля
        li ляляля


        1. nightzen Автор
          15.08.2021 22:23
          #23373622
          +2

          Мне, лично, Pug не очень нравится по тем же причинам, почему многие предпочитают SCSS вместо SASS.


          1. Alexufo
            15.08.2021 22:24
            #23373628

            мне sass тоже не нравится, предпочитаю scss, а pug прям норм.


        1. mSnus
          16.08.2021 00:07
          #23373860

          Хорошая аналогия выше с SASS: всё же это препроцессор, со всеми его плюсами и минусами.


          А с Emmet — это просто текстовые макросы, поэтому они никак не нарушают work flow, как работал с чистым HTML, так и работаешь — никаких новых сущностей. Этим и хорош.


          1. Alexufo
            16.08.2021 03:42
            #23374108
            +1

            Я не сильно верю, что чистый html один правится и это весь уорк флоу. Ну не бывает уже такого в большинстве случаев. Ну маркдаун разве что так может себя вести… ну верстка на бутстрапе чистом если только или подобном.
            Скорее всего тот же препроцессор для css уже подключен в проект и работает. Думаю, дело просто в привычке. Я тоже сопротивлялся, а как попробовал… блин ну удобнее, факт.


            1. mSnus
              16.08.2021 04:46
              #23374144

              Да, разница только в одном -- нужно ли подключать и использовать ещё один препроцессор.

              К тому же в SASS я могу сделать всё то же, что в CSS, только больше. А pug хорош для каркасов за счёт того, что он проще html, но тем же и ограничен.


              1. Alexufo
                16.08.2021 04:50
                #23374152

                Да хоть еще три) Не страшно. На сколько мне известно pug полностью покрывает html возможности и более того, позволяет больше, например, рендерить из заранее набитой бд, шаблоны, миксины, инклуды (footer header) почти как пых.
                Удобно размножать карточку товара какую нибудь из бд. А верстка компонента то одна.


                1. mSnus
                  16.08.2021 09:04
                  #23374478

                  Уговорили)) попробую, спасибо за идею!


                  1. Alexufo
                    16.08.2021 14:14
                    #23375870

                    ага, посмотрите у этих товарищей как сделано
                    habr.com/ru/company/e-Legion/blog/440134

                    прямо невероятно минималистично


                    1. mSnus
                      16.08.2021 15:29
                      #23376260

                      Ну, не знаю даже. Там такая тонна бойлерплейта к этому нужна… от pug до gulp. И в результате — как они всё же в pug объявляют вот такое?


                      <ul class="about-achievements list-unstyled row d-none d-sm-flex">
<li class="col-md-6 col-lg-3">
<li class="col-md-6 col-lg-3">
...

                      придётся руками писать всё то же самое, только учить другой синтаксис? Тогда а) код уже получится совсем не такой чистый и читаемый б) к pug нужен свой Emmet-плагин..


                      1. Alexufo
                        16.08.2021 16:02
                        #23376434
                        +1

                        У них сайт для компании на статике, не нужно заниматься переносом верстки на движек. Верстка сама движек. 

                        ul.about-achievements.list-unstyled.row.d-none.d-sm-fle
  li.col-md-6.col-lg-3
или
ul(class="about-achievements list-unstyled row d-none ")


              1. nightzen Автор
                16.08.2021 10:48
                #23374860
                +2

                Разница не только в этом, Emmet предназначен для того, чтобы быстро набросать структуру разметки за счёт расширения аббревиатур:

                nav>ul>li*4>a[class="link"]{Link $} →

                <nav>
  <ul>
    <li><a href="" class="link">Link 1</a></li>
    <li><a href="" class="link">Link 2</a></li>
    <li><a href="" class="link">Link 3</a></li>
    <li><a href="" class="link">Link 4</a></li>
  </ul>
</nav>

                Чтобы добиться такого же результата в Pug, нужно написать цикл и следить за отступами:

                nav
  ul
    - for (var x = 1; x <= 4; x++)
      li
        a(class='link')= "Link" + x

                Pug же, в свою очередь, добавляет такие фичи, как условия, циклы, блоки и прочее. Если создаётся статический сайт или нужен шаблонизатор для какого-нибудь фреймворка, то стоит присмотреться к Pug. Если рассматривать JSX, то тут уже есть условия, циклы и компоненты. Есть плагин, но тут встаёт вопрос о том, насколько он хорошо поддерживается. Я ни разу не встречал Pug в проектах на реакте. Emmet, в этом плане, хорош тем, что не требует написания плагинов babel. Можно создавать свои аббревиатуры и фрагменты для любого языка.


                1. Alexufo
                  16.08.2021 14:11
                  #23375848

                  Следить за отступами мне легче, чем за закрывающимися тегами, потому что банальный Prettier все отступы делает сам, вам лишь надо следить, чтобы каскад визуально не вылазил слишком влево где это не нужно.
                  А потерять тег при правке html куда легче.

                  На реакте, все таки компоненты, а компоненты это не больше 10-100 строчек верстки. Преимущества Pug на таких вещах действительно чувствуются меньше, нет особых проблем чекать закрытие тегов, весь компонент то на экране, да и все удалять и переписывать заново не трудно.

                  Есть одна архитектурная проблема подобных подходов как у emmet — это бойлерплейт, это чувство избыточности информации, не объясненной технически, кроме как — так проще нашей технологии поэтому пишите избыточно.

                  Да, emmet скорее язык макросов, извергающий бойлерплейт, pug все таки уже полноценный шаблонизатор c поддержкой es6.


                  1. nightzen Автор
                    16.08.2021 14:31
                    #23375960
                    +1

                    Насколько я знаю, в Pug, если теги имеют одинаковые отступы, то они находяться на одном уровне. Если у второго тега отступ больше, то он вложен в предыдущий. Prettier же не будет угадывать, что Вы имели в виду. Тут он как раз больше поможет с чистым HTML.

                    Потерять тег при правке HTML конечно можно, но есть различные хоткеи на этот случай.

                    В чём заключается бойлерплейт, если честно, не понял)


                    1. Alexufo
                      16.08.2021 14:43
                      #23376020

                      Prettier да, будет только выравнивать количество пробелов между вложенностями чтобы не было ее нарушения, но при этом чтобы шаг вложенности был одинаковый. Более того, есть опции в vscode которые очень мило подсвечивают вложенности визуальными конструкциями.

                      Бойлерплейт — это избыточность, когда языковая конструкция требует меньше символов, зачем та, которая требует больше. Это касается в целом html. Мы точно так же используем в нем отступы, но технически он опирается на закрывающие теги. Нам нужно первое, машине — второе. Так машине же пофиг, пусть использует первое)


                      1. nightzen Автор
                        16.08.2021 14:51
                        #23376058

                        Ну тут опять же, на вкус и цвет, по аналогии с SASS/SCSS. Можно использовать сочетание Emmet + Pug.


  1. alex_mayak
    16.08.2021 08:36
    #23374376

    Чет не заметил ссылки на https://docs.emmet.io/cheat-sheet/


  1. SokolovAG
    17.08.2021 11:44
    #23379436

    Emmet также хорош для быстрого написания стилей, использую его не только для написания HTML.
    А в стилях чаще всего достаточно написать аббревиатуры и нужные значения, например:

    jcsb -> justify-content: space-between;
    m0-a -> margin: 0 auto;
    bgc#fff -> background-color: #ffffff;

    и т.д.


    1. Alexufo
      18.08.2021 14:54
      #23383916

      проще тогда tailwind если у вас такой подход к написанию стилей