Вышел Emmet v1.0

Рад сообщить, что после более полугода разработки в свет вышел Emmet ^[1] (бывший 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 предлагает множество действий, упрощающих работу с существующим кодом: выделение пары тэгов ^[2], быстрый переход к точкам редактирования ^[2], комментирование тэга ^[3] и многое другое ^[4].

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

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

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

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

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

Автор: chikuyonok

Источник ^[21]