Skip to content

Пишем HTML быстрее с Emmet!

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

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

Как это работает

HTML

С помощью Emmet, вместо того, чтобы писать всю HTML-структуру вы используете CSS селекторы! Действительно классно, с Emmet коротенькое выражение, например такое:

div#content>(h1+p)

Превратится в

<div id="content">
	<h1></h1>
	<p></p>
</div>

Вот еще небольшая справка о Emmet:

  • E — Элемент (div, p)
  • E#id — Элемент с идентификатором (div#content, p#intro)
  • E.class — Элемент с классом(-ами) (div.header, p.error.critial). Также можно комбинировать классы и идентификаторы: div#content.column.width;
  • E>N — Дочерние элементы (div>p, div#footer>p>span);
  • E+N — Соседние элементы (h1+p, div#header+div#content+div#footer);
  • E*N — Вставка нескольких (умножение) элементов (ul#nav>li*5>a);
  • E$*N — Нумерация элементов (ul#nav>li.item-$*5);
  • E[attr] — Элемент с атрибутом(-ами) (a[href="#"]);
  • E{Word} — Элемент с текстом (h1{Привет, мир!});

Так же все это можно комбинировать.

CSS

В CSS просто используется сокращение названия свойства до 1-3 букв. К примеру, выражение w100% преобразуется в width: 100%;. Но так же есть и более существенные сокращения.

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

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

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

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

Установка в редакторы

Вы можете скачать плагин Emmet на официальном сайте, где представлены ссылки на плагины для всех доступных редакторов. Так есть официально поддерживаемые плагины для таких редакторов, как Apatana Studio, Eclipse, Komodo Edit, Coda и др. В такие редакторы, как BlueFish и Codelobster, Zen Coding идет в комплекте.

Кстати, вы хотите научиться всем комбинациям Emmet? Тогда вы можете скачать полную шпаргалку прямо с проекта Emmet на Google Code.

Установка Emmet в Sublime Text 2

Чтобы работать с Emmet в редакторе кода Sublime Text 2

  1. Установите Package Control и перезапустите редактор (если у вас его еще нет).
  2. Зайдите в командной панели в «Install Package«. Жмем Enter. И вы увидите все доступные пакеты для вашей ОС & версии Sublime.
  3. Найдите в списке «Emmet» и нажмите Enter и еще раз перезапустите редактор.

Установка Emmet в Aptana Studio/Eclipse

  1. Перейдите в Help > Install New Software…
  2. Добавьте адрес http://emmet.io/eclipse/updates/ в сайты обновлений
  3. Проверьте доступность группы «Emmet for Eclipse» в списке плагинов, нажмите кнопку «Next» и следуйте инструкциям по установке.
  4. Перезапустите Aptana Studio

Установка Emmet в Komodo Edit/IDE

Для установки Emmet перейдите в Tools->Add-ons и во вкладке Get Addons жмите название файла плагина Emmet (находится справа под названием). После перезапуска редактора вам понадобится настроить комбинации клавиш для Emmet.

Заключение

Думаю, вам понравится работать с Emmet в любом редакторе. По мне, так это самый важный плагин для любого редактора кода. Какие фишки плагина вам понравились больше всего? Делитесь опытом!