Emmet – плагин, который позволяет значительно увеличить скорость вёрстки кодирования за счёт комбинации команд и различных аббревиатур. Несмотря на маленький вес Emmet достаточно мощный, за что получил название «муравей». Перед началом использования плагин необходимо скачать на официальном сайте, затем установить на свой ПК. Также, если вы являетесь пользователем Visual Studio Code, то Emment уже встроен в него изначально.
Аббревиатуры
Аббревиатуры – это специальные команды, состоящие из набора букв и цифр, которые считываются программой и записываются в блок кода. Чтобы перемещаться между вкладками сгенерированного кода, создаются специальные метки табуляции, которые реагируют на клавишу Tab.
Стоит отметить, что преобразование тега для Emmet не вызывает затруднений, так как у него нет определённого набора имён. Для создания подойдёт следующий алгоритм действий:
Написать любое слово div <div> ≤/div≥, foo <foo> ≤/foo≥ и другие. Далее нажать клавишу Tab, предварительно изменив настройки на:
{«emmet . triggerExpansion0nTab»: true{
Для этого необходимо нажать на символ ! и на клавишу 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>
Об операторах вложенности
Служат для распознавания элементов внутри сгенерированного кода.
Вспомогательный элемент
С помощью оператора > можно вкладывать одну команду в другую.
Смежный элемент
Для расположения элементов на одном уровне необходимо воспользоваться оператором +
Дублирование
Оператор * насчитывает количество повторений команды.
Систематизация
Для разграничения и выделения шифров используются круглые скобки. В них прописываются отдельные команды.
Также можно включить один элемент в другой с помощью оператора умножения.
Особенности операторов
Есть возможность указать атрибуты для вводимых команд.
Указание id и класса
С помощью оператора . указывается класс. Для id служит оператор #.
Дополнительные атрибуты
Для вывода произвольных элементов служат квадратные скобки.
У дополнительных атрибутов есть характерные черты:
- Использование пробела необходимо для отделения элементов друг от друга.
- Использование двойных и одинарных кавычек для определения значений атрибутов.
- Не обязательно использовать кавычки для написания элемента, если он не включает пробелы.
- Если редактор поддерживает метки табуляции и значение вводимого элемента не указано, то пространство заполняется пробелом и меткой табуляции.
Нумерация
Для создания нумерации необходим оператор $. Он размещается после имени элемента или дополнительного атрибута:
Оператор $ можно поместить в любом месте имени элемента, дополнить нулями и использовать несколько операторов подряд:
Базовое значение и направление нумерации
Модификатор @ меняет направление нумерации и базовое значение. Добавление $ к @ изменяет направление нумерации элемента, а добавление к модификатору @ символа N позволяет менять начальное значение.
Также можно совершить вышеперечисленные действия за один шаг:
Добавление текста
Чтобы вставить текст используйте фигурные скобки:
Нечёткие имена тегов
Имя тега не обязательно прописывать. К примеру, div.content можно сократить до .content. Программа преобразует его в <div class="content"></div>. Это происходит потому, что emmet запоминает родительский тег. В случае блочного элемента будет применён тег div, иначе — span. Необходимо обозначить нюансы:
Генератор "Lorem Ipsum"
Аббревиатуры "lorem" и "lipsum" выдаёт случайный текст, который набирается из 30 слов и раскладывается на несколько взаимосвязанных синтаксических конструкций.
Количество подбираемых слов можно указать самостоятельно. Допустим, lorem10 сгенерирует текст из 10 слов. Для создания случайного текста можно воспользоваться ранее известным оператором повторения *:
Добавление аббревиатур и фрагментов
Иногда программа выставляет на некоторые аббревиатуры свои атрибуты. Они уже заранее установлены и высвечиваются по ходу написания команд. Со списком базовых аббревиатур можно ознакомиться в каталоге snippets. Например, в файле html.json. находятся основные элементы.
В документации плагина можно ознакомиться со способами добавления аббревиатур. Если работа пишется в Visual Studio Code, то необходимо создать файл snippets.json. Допускается ранжирование файлов с глобальными и локальными настройками на уровне проекта. Затем, в файле настроек VSCode, прикрепляется параметр emmet.extensionsPath, с отсылками к каталогам, содержащим файл snippets.json. Примерный алгоритм: создать каталог .vscode в проекте. В каталоге .vscode создать файлы settings.json и snippets.json. Операция через терминал приходит следующим образом:
В файл settings.json добавить следующую настройку:
В файле snippets.json записывается свой псевдоним и фрагмент для каждого языка. В настоящее время в VSCode используется Emmet 2.0, где аббревиатуры и фрагменты задаются через параметр snippets. Создадим несколько аббревиатур для html и css:
Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.
