Emmet

! -<Tab> Создание базовой структуры html

div>ul>li Операторы вложенности

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

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

div>(header>ul>li*2>a)+footer>p Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья

(div>dl>(dt+dd)*3)+footer>p Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения

div#header+div.page+div#footer.class1.class2.class3 Оператор . позволяет указать класс. Оператор # предназначен для указания id

td[title="Hello world!" colspan=3] Квадратные скобки позволяют задавать элементу произвольные атрибуты

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

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

ul>li.item$*3 , ul>li.ite$m*2 Оператор $ позволяет создавать нумерацию. Вы можете использовать несколько операторов $ подряд, чтобы дополнить номер нулями.

ul>li.item$@-*3, ul>li.item$@3*5, ul>li.item$@-3*5 Модификатор @ позволяет изменить начальное значение и направление нумерации (по возрастанию или убыванию). Чтобы изменить направление нумерации, добавьте модификатор @- после оператора $. Чтобы изменить начальное значение счетчика, добавьте модификатор @N к оператору $.

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

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

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

li для ul и ol.
tr для table, tbody, thead и tfoot.
td для tr.
option для select и optgroup.

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

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

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

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

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

mkdir .vscode && cd .vscode
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 можно найти в официальной документации.

Emmet

Report Page