Вышел Emmet v1.0

Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:

section>h2+ul.nav>li.nav-item$*5>a

простым нажатием клавиши превращается в:

<section>     <h2></h2>     <ul class="nav">         <li class="nav-item1"><a href=""></a></li>         <li class="nav-item2"><a href=""></a></li>         <li class="nav-item3"><a href=""></a></li>         <li class="nav-item4"><a href=""></a></li>         <li class="nav-item5"><a href=""></a></li>     </ul> </section> 

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

Как было отмечено выше, Emmet – это новое имя проекта Zen Coding, ранее упоминавшегося на Хабре. С новым названием проект получил новую жизнь и новые возможности:

• Появилась полноценная документация и официальный сайт, где можно получить наиболее полную информацию о проекте и его возможностях.
• Все плагины были переписаны «с нуля» для более тесной интеграции с редактором. Большинство из них обновляются автоматически.
• Улучшенная работа с CSS: значения свойств можно писать прямо в аббревиатуре. Также был учтён опыт и пожелания пользователей — благодаря модулю нечётного поиска вам необязательно запоминать громоздкие названия аббревиатур, достаточно написать всего несколько символов (например, ov:h == ov-h == o-h == oh == overflow: hidden);
• Улучшен модуль определения неявных имён тэгов. Ранее, если вы пытались развернуть аббревиатуру вроде .item, то в результате могли получить либо <div class="item">, либо <span class="item">, в зависимости от типа родительского тэга. Теперь модуль смотрит на название тэга и может вывести, например, <li>, <td>, <option>.
• Поддержка расширений. Теперь, чтобы добавить новую аббревиатуру или настроить вывод результата, не надо лезть в код плагина, достаточно создать несколько простых JSON-файлов в специальной папке.
• Генератор «Lorem Ipsum». Ранее, чтобы получить «рыбный» текст для сайта, надо было пользоваться сторонними ресурсами, а затем форматировать результат. Теперь получить такой текст можно прямо в редакторе, причём количество слов в тексте можно регулировать, просто дописав число после аббревиатуры. Более того, генератор использует все возможности аббревиатур Emmet, позволяя дописывать нужные атрибуты к генерируемым элементам и регулировать количество создаваемых блоков.
• Новый оператор ^.

Также я выпускаю ещё несколько дополнительных проектов, которые были созданы во время работы над Emmet:

• CodeMirror Movie (по-русски) — плагин для редактора CodeMirror, позволяющий создавать демонстрационные ролики для кода.
• Плагины для DocPad (по-русски) — рассказ о том, как создавать профессиональные сайты на DocPad, фрэймворке для генерирования статических сайтов.

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