Emmet
Emmet (ранее Zen Coding) — набор плагинов для текстовых редакторов, позволяющих значительно ускорить написание и редактирование HTML, XML, XSLT и других форматов структурированного кода с помощью автодополнения. Проект был инициирован Вадимом Макеевым в 2008 году[9]. С 2009 года его активной разработкой занимается Сергей Чикуёнок, который в 2012 году переименовал проект в Emmet. С 2015 года за пользовательский опыт отвечает Микаэл Гелецян. Ядро Emmet написано на TypeScript и JavaScript[10]. Инструменты Emmet интегрированы во множество популярных текстовых редакторов, а также доступны в виде плагинов, часть из которых разработана командой Emmet, а часть — независимыми разработчиками. Однако Emmet в основном независим от конкретного редактора, поскольку его движок взаимодействует непосредственно с текстом, а не с каким-либо определённым программным обеспечением[11].
Emmet распространяется под лицензией MIT.
Общие сведения
| Emmet | |
|---|---|
| Тип | Плагин для текстовых редакторов[1] |
| Автор | Вадим Макеев[2] |
| Разработчики | Сергей Чикуёнок, Микаэл Гелецян[3] |
| Написана на | TypeScript, JavaScript |
| Интерфейс | Текстовый (на основе аббревиатур)[4] |
| Операционные системы | Кроссплатформенное (Windows, macOS, Linux)[5] |
| Первый выпуск | 15 ноября 2008[2] |
| Аппаратная платформа | Кроссплатформенное[6] |
| Последняя версия | 2.4.11[7] (23 сентября 2024[7]) |
| Репозиторий | github.com/emmetio/emmet |
| Состояние | активное[8] |
| Лицензия | MIT |
| Сайт | emmet.io |
Название
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 позволяет генерировать код для различных языков и синтаксисов, в первую очередь ориентированных на веб-разработку. Основные поддерживаемые синтаксисы включают:
В некоторых редакторах, таких как Visual Studio Code, пользователи могут настроить Emmet для работы с другими языками, которые не поддерживаются по умолчанию[16].
Текстовые редакторы
Emmet интегрирован во множество популярных текстовых редакторов и IDE. В зависимости от программного продукта, он может быть доступен как встроенная функция или как устанавливаемый плагин.
Встроенная поддержка
Функциональность Emmet встроена по умолчанию в большинство современных сред веб-разработки. К ним относятся:
- Visual Studio Code: поддержка является встроенной и не требует установки расширений[17].
- IDE от JetBrains (WebStorm, PhpStorm, IntelliJ IDEA и др.): инструментарий Emmet интегрирован в продукты компании[18].
Поддержка через плагины
Для ряда других популярных редакторов поддержка Emmet реализуется путём установки отдельного плагина:
В то же время в некоторых новых редакторах, таких как 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].
Примечания
Ссылки
- emmet.io (англ.) — официальный сайт Emmet