Экономия времени с Emmet

Про Emmet (ранее zen coding), плагин позволяющий существенно ускорить процесс написания кода и html с css в частности, и его применение в консоли WordPress я уже писал ранее в заметке Emmet + WordPress.

Эта заметка что-то вроде шпаргалки-запоминалки наиболее удобных и применимых возможностей. Вся указанная ниже информация содержится в полном объеме на странице проекта – docs.emmet.io.

Пропускаем div

Emmet легко поймет запись такого вида:

.wrapper

И после нажатия настроенного сочетания клавиш превратит ее в:

<div class="wrapper"></div>

Хотя, конечно, можно написать и так:

div.wrapper

Оба варианта корректны, но при явном отсутствии названия элемента перед маркером класса или идентификатора, по умолчанию будет использовать div.

Закономерные имена элементов

Аналогичным образом Emmet поступит и в этом случае:

.wrapper>ul.menu>.item

Однако, в данной записи, во втором случае отсутствия имени элемента перед маркером класса .item, будет подставлен не div, а li. Т.е. плагин определит, что его родителем является ul, значит, дочерним элементом будет li.

<div class="wrapper">
	<ul class="menu">
		<li class="item"></li>
	</ul>
</div>

Это справедливо для плагина текстового редактора, но не работает в javascript варианте, к сожалению.

Операторы

Дочерний

Для создания дочернего элемента используется знак >. Пример:

.wrapper>.inner>p

Будет интерпретирован в:

<div class="wrapper">
	<div class="inner">
		<p></p>
	</div>
</div>

Родственный

Для создания родственных элементов, т.е. элементов одного и того же уровня используется знак +. Приведенный ранее пример, но с использованием знака +:

.wrapper+.inner+p

в результате работы плагина будет выглядеть так:

<div class="wrapper"></div>
<div class="inner"></div>
<p></p>

Шаг наверх

Подняться наверх по структуре элементов можно с помощью знака ^. Его работу можно легко понять по примеру:

div+div>p>span+em^bq

Который будет развернут в:

<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

К сожалению, не работает в javascript версии, в ней будет развернут только последний элемент – blockquote.

Дублирование

Часто требуется создать не один элемент, а несколько, например, для нумерованного списка требуется создать, скажем, 5 дочерних пунктов, это можно сделать так:

ol>li*5

Таким образом, мы, используя оператор * создадим 5 дублей list item.

<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

Так просто!

Группировка

Как поступить, если надо создать сложную структуру элементов, например, такую:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Все просто, используем круглые скобки ( ), т.е. так будет выглядеть сокращенная запись:

div>(header>ul>li*2>a)+footer>p

Попробуйте данные примеры самостоятельно, уверен, возможности Emmet придутся вам по вкусу!

Дополнение от 25.02.2013
Реализовал добавление Emmet в консоль WordPress в виде крохотного плагина, скачать и обсудить можно здесь — Emmet WordPress плагин.

Опубликовано 10.1.2013