Emmet

Emmet — слово, изначально означавшее «муравей», насекомое, способное нести более чем 50 раз свой собственный вес. Это слово также созвучно с «эмет», что в некотором роде отражает суть работы Emmet при расширении аббревиатур.

Emmet использует специальный синтаксис, позволяющий преобразовывать короткие фрагменты кода, напоминающие селекторы CSS, в полноценный HTML-код^[12]. Преобразование, как правило, выполняется по нажатию клавиши `Tab`. Например, последовательность

div#page>div.logo+ul#navigation>li*5>a

или

#page>.logo+ul#navigation>li*5>a

преобразуется в

<div id="page">
        <div class="logo"></div>
		<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

В этом примере используются основные операторы Emmet: `>` (дочерний оператор для создания вложенных элементов), `+` (соседний оператор для элементов на одном уровне), `*` (умножение для многократного повторения элемента), а также синтаксис `#` для идентификаторов и `.` для классов^[13][14]. Для добавления текстового содержимого внутрь тега используются фигурные скобки `{}`, а команда `lorem` позволяет быстро генерировать текст-заполнитель «Lorem Ipsum».

Эта функция включает и другие сложные возможности, такие как оборачивание выделенного участка кода расширенным кодом^[15].

HTML Pair Matcher («поиск парных HTML-тегов») позволяет пользователям находить соответствующий открывающий или закрывающий тег для тега, находящегося в текущей позиции курсора. В отличие от других подобных инструментов, Emmet осуществляет поиск, начиная с текущей позиции курсора, а не с начала документа^[11].

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

• HTML
• XML
• XSL
• CSS
• SASS/SCSS
• LESS
• Haml
• Pug (ранее Jade)
• JSX

В некоторых редакторах, таких как Visual Studio Code, пользователи могут настроить Emmet для работы с другими языками, которые не поддерживаются по умолчанию^[16].

Emmet интегрирован во множество популярных текстовых редакторов и IDE. В зависимости от программного продукта, он может быть доступен как встроенная функция или как устанавливаемый плагин.

Функциональность Emmet встроена по умолчанию в большинство современных сред веб-разработки. К ним относятся:

• Visual Studio Code: поддержка является встроенной и не требует установки расширений^[17].
• IDE от JetBrains (WebStorm, PhpStorm, IntelliJ IDEA и др.): инструментарий Emmet интегрирован в продукты компании^[18].

Для ряда других популярных редакторов поддержка Emmet реализуется путём установки отдельного плагина:

• Sublime Text
• Notepad++
• Eclipse
• Adobe Dreamweaver
• NetBeans
• Coda^[19]
• TextMate^[19]

В то же время в некоторых новых редакторах, таких как Zed, встроенная поддержка Emmet на 2024 год отсутствует, что отмечается пользователями как недостаток^[20].

Проект Emmet продолжает активно развиваться и поддерживаться, оставаясь актуальным и широко используемым инструментом в веб-разработке^[21].

Последней стабильной версией основного пакета (ядра) Emmet является 2.4.11, выпущенная 23 сентября 2024 года. Официальные публичные альфа- или бета-версии для ядра Emmet не выпускаются. Тем не менее, предварительные (бета) версии могут существовать для плагинов под конкретные текстовые редакторы, например для Sublime Text^[22]. Версии таких плагинов-интеграций могут отличаться от версии ядра Emmet^[23].

Поддержка синтаксиса Emmet появляется в маркетинговых и No-code инструментах (например, Customer.io) для ускорения верстки писем и форм^[24][25].