You are here

ZenCoding

Если вы периодически сталкиваетесь с HTML и CSS в своей работе, то наверняка слышали об этом наборе скриптов для скоростной верстки. Если нет, рекомендую скорее восполнить этот пробел. Хоть в этом инструменте и скрыто много возможностей, начать работать с ним вы можете уже сейчас.

Установка

Вручную
Sublime Package Control

Синтаксис

ZenCoding работает как обычный автокомплит. Например, вы набираете table, нажимаете tab и получаете готовый тег:

<table></table>

Разница состоит в том, что вы можете указать нужное вам количество тегов с необходимой вложенностью и параметрами. Главное понять, по какому принципу строятся выражения. Синтаксис ZenCoding очень логичен, и если вы знакомы с HTML и CSS, то освоить его сможете довольно быстро.

Оператор Результат
. class
# id
> вложенный тег
+ соседний тег
[name=value] параметр
*X множитель
$ число

Ниже я приведу несколько простых примеров использования. От простого к чуть более сложному.

table, tab

<table></table>

table.name

<table class="name"></table>

table#id.name

<table id="id" class="name"></table>

table#id.name>tr>td

<table id="id" class="name">
  <tr>
    <td></td>
  </tr>
</table>

table#id.name>tr>td+td или table#id.name>tr>td*2

<table id="id" class="name">
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

table#id.name>(tr>td*2)*2

<table id="id" class="name">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

table#id.name>(tr>td*2)+tr>td[colspan=2]

<table id="id" class="name">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

img[src="/images/image-$$.jpg"]*3

<img src="/images/image-01.jpg" alt="">
<img src="/images/image-02.jpg" alt="">
<img src="/images/image-03.jpg" alt="">

Хоткеи

В качестве обзорной экскурсии, хотелось бы привести список примечательных хоткеев, которые обязательно пригодятся в работе.

Основные

tab добавить HTML элемент.
ctrlaltenter реалтайм отображение интерпритации вводимой Zen-строки. Работает с выделением.
., tab добавить div с атрибутом class.
#, tab добавить div с атрибутом id.
altshiftw обернуть элемент, находящийся под курсором.
ctrlshiftu удалить тег, находящийся под курсором.
ctrlalt/ закомментировать конструкцию тегов, находящуюся под курсором.

Выделение

ctrlshifta выделить пару тегов, между которыми находится курсор.
ctrlshiftn выделить парные теги и все, что находится между ними.
ctrlshiftt отменить последние парное выделение.
ctrlshift. выделить следующий элемент.
ctrlshift, выделить предыдущий элемент.

Курсор

ctrlaltn переместить курсор к парному тегу.
ctrl. переместить курсор к следующему месту редактирования.
ctrl, переместить курсор к предыдущему месту редактирования.

Разное

f1 CSS подсказка.
ctrlaltshifth вставить HTML-заготовку.
ctrlshiftalt6 кодировать или декодировать изображение в base64.
ctrlaltshiftm обновить или добавить размеры изображения тегу, находящемуся под курсором.
ctrlaltshift= вычислить простое математические выражение под курсором.
ctrlj объединить выделенные строки в одну. Если ничего не выделено, находит ближайший парный тег и объединяет все между ними.

Фильтры

В ZenCoding есть возможность использования фильтров для изменения генерируемого кода. Для того, чтобы включить фильтр, его необходимо указать через вертикальную черту после выражения. Например: table>tr>td|haml.

Фильтр Действие
haml Включает генерацию HAML кода. Используется по-умолчанию в HAML файлах.
html Включает генерацию HTML кода. Используется по-умолчанию во всех файлах, кроме HAML.
e Заменяет символы <, > и & безопасными HTML-кодами.
c Добавляет комментарии в генерируемый код.
fc CSS фильтр. Добавляет пробел после параметра.

Ссылки

Загрузить https://github.com/sergeche/zen-coding/downloads
Синтаксис http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
Демо http://zen-coding.ru/textarea/

Комментарии

Artyom4D's picture

А разве этот проект не переименовался в Emmet?

loac's picture

Давно уже. Надо будет подкорректировать заметку. Спасибо.

Алекс's picture

А где взять зенкодинг для 3 версии

loac's picture

ZenCoding теперь разрабатывается под названием Emmet.

Прохожий's picture

Ребят, почему при создании тега (HTML), в конце добавляется лишний символ ">"? например должно <p>..</p> а выходит <p>..</p>>, кто с этим сталкивался? как решили проблему?заранее спасибо.

loac's picture

Скорее всего, проблема связана с дополнением ZenCoding. С этим уже сталкивались.

Если не поможет, нужно больше информации. Какие модули установлены и что ты набираешь для автодополнения.