Прощаемся с Zen Coding. Встречаем Emmet

В 2009 году Сергей Чикуёнок опубликовал статью, которая изменила представление о написании HTML и CSS кода. За эти годы огромное число разработчиков стали пользоваться плагином Zen Coding, развитие которого выходит на новый уровень.

Emmet, также известный как Zen Coding - это самый эффективный плагин для быстрого написания HTML и CSS кода, который когда-либо существовал. Благодаря нему, из простого выражения можно сгенерировать целый блок кода. Emmet, в этом плане, обещает быть ещё лучше и удобнее.

Как работает Emmet?

Давайте по-чесноку: написание HTML кода занимает много времени за счёт ввода тегов, атрибутов, кавычек, скобок и так далее. Конечно же большинство текстовых редакторов помогают в этом, но всё же гораздо меньше печатать нам от этого не приходится. Emmet может значительно упростить написание кода за счёт преобразования простых аббревиатур в полноценные блоки кода.

HTML аббревиатуры

Инициализаторы

Получить базовую структуру HTML документа теперь можно меньше чем за одну секунду. Напишите аббревиатуру html:5 или просто !, нажмите клавишу Tab и через миг вы увидите полноценный базовый код с доктайпом HTML5.

• html:5 или ! - HTML5
• html:xt - XHTML transitional
• html:4s - HTML4 strict

Добавление классов, id-шек, текста и атрибутов

Поскольку синтаксис Emmet очень похож на CSS селекторы, то понять, как им пользоваться, очень просто. Попробуйте поэкспериментировать с каким-то элементом (к примеру, p) и идентификатором (к примеру, p#description)

Также вы можете комбинировать классы и идентификаторы. К примеру, выражение p.bar#foo преобразится в:

<p class="bar" id="foo"></p>

Теперь давайте посмотрим, как добавить текст и атрибут. Для того чтобы задать элементу какой-то текст, его значение пишем в фигурных скобках. К примеру h1{foo} преобразится в:

Квадратные скобки используются для добавления атрибутов и их значений. К примеру, a[href=#] преобразится в:

Вложенность элементов

Благодаря Emmet и синтаксису написания вложенных выражений, вы можете полностью создать полноценный html документ, воспользовавшись одной аббревиатурой. Родительский элемент ставится перед знаком >, а все внутренние элементы должны идти за ним. Знак + позволяет соединить несколько аббревиатур, так что сгенерированный код будет идти друг за другом. Новый оператор под знаком ^ позволяет подняться на один уровень выше.

Группировка

Часто можно немного запутаться, когда вы пишите большие аббревиатуры. Для того чтобы этого избежать, можно воспользоваться группировкой. К примеру, (.foo>h1)+(.bar>h2) преобразится в:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Подстановка названий тегов

Для того чтобы создать div блок с класом item, достаточно преобразовать аббревиатуру div.item.

В прошлом написание подобных выражений было упрощено. К примеру, чтобы получить тот же <div class="item"></div>, можно было написать аббревиатуру .item. Emmet в этом плане стал ещё более продвинутым. Теперь плагин может автоматически определять, какой тег нужно подставить в зависимости от родителя. Т.е. если мы преобразуем аббревиатуру .item внутри списка <ul>, то аббревиатура превратится в <li class="item"></li>, вместо <div class="item"></div>, как это было раньше.

Вот небольшая шпаргалка:

• li для ul и ol
• tr для table, tbody, thead и tfoot
• td для tr
• option для select и optgroup

Умножение

Также, с помощью знака *, вы можете определить, сколько раз должен напечататься нужный вам элемент. Таким образом, аббревиатура ul>li*3 преобразуется в:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Нумерация

Как на счёт комбинации оператора умножения и нумерации? Да нет проблем! Просто поставьте знак $ в конце названия атрибута или элемента и будет вам счастье! К примеру, ul>li.item$*3 превратится в:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

Попробуйте сами!

Не терпится попробовать?! Следующее текстовое поле как раз для вас. Пишите аббревиатуру, затем нажимайте tab и вуаля!

CSS аббревиатуры

Значения

Emmet предназначен для упрощения написания не только HTML, но и CSS кода. К примеру, вы хотите задать элементу ширину. Для этого просто напишите w100:

Значение px ставится по умолчанию. Для другой единицы измерения используйте специальные символы. К примеру h10p+m5e:

height: 10%;
margin: 5em;

Список возможных значений:

• p → %
• e → em
• x → ex

Дополнительные опции

К примеру, с помощью выражения @f, вы можете получить код:

@font-face {
  font-family:;
  src:url();
}

В данном случае, такие опции как background-image, border-radius, font, @font-face, text-outline, text-shadow могут быть добавлены, если к выражению приписать знак +. К примеру, @f+ преобразуется в:

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

Автоматический поиск

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

CSS3 префиксы

CSS3 конечно очень крут, но запомнить все существующие префиксы просто невозможно! Ну и не надо! Emmet и тут окажет нам помощь. К примеру, слово trs будет преобразовано в:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Также вы можете приписать свои префиксы. К примеру, -super-foo преобразится в:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что если вам нужны только несколько из существующих префиксов? Нет проблем, просто укажите первые буквы их названий: -wm-trf преобразуется в:

-webkit-transform: ;
-moz-transform: ;
transform: ;

• w → -webkit-
• m → -moz-
• s → -ms-
• o → -o-

Градиенты

Если говорить о CSS3, то нельзя обойти стороной градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру. К примеру, lg(left, #fff 50%, #000) преобразуется в:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

Дополнительные возможности

Lorem Ipsum

С Emmet вы можете забыть об онлайн сервисе Lorem Ipsum. Теперь для этого есть специальная аббревиатура: lorem или ipsum. Также вы можете указать, сколько слов нужно сгенерировать. К примеру, lorem10 преобразуется в:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

Также lorem ipsum можно смешать с другими элементами. К примеру, p*3>lorem5:

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

Настройка под себя

Emmet даёт нам возможность изменить большой спектр настроек плагина. Для этого нужно будет отредактировать три файла:

Для добавления нового выражения или изменения уже существующего отредактируйте файл snippets.json

Для преобразования работы фильтров и действий попробуйте изменить файл preferences.json

Для контроля отображения HTML и XML кода, редактируйте файл syntaxProfiles.json

И ещё!

Это только вершина айсберга. Emmet содержит в себе ещё огромное количество возможностей, таких как кодирование/декодирование изображенийdata:URL, обновление размеров изображения, увеличение/уменьшение цифровых значений и т.д.

Официальную страничку плагина можно найти тут. Также в вашем распоряжении документация и шпаргалка

Поддержка текстовых редакторов

Вот список тех текстовых редакторов, в которые можно внедрить Emmet:

А что скажете вы?

Пользуетесь ли вы данным плагином? Если да, то какие ваши любимые фишки? Делитесь опытом!

• Комментарии