Pull to refresh

Вышел Emmet v1.0

Reading time 3 min
Views 52K
Рад сообщить, что после более полугода разработки в свет вышел 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:


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

Articles