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/


loac
2014-07-08 12:19:00
Скорее всего, проблема связана с дополнением ZenCoding. С этим уже сталкивались. Если не поможет, нужно больше информации. Какие модули установлены и что ты набираешь для автодополнения.
2014-07-08 10:07:52
Ребят, почему при создании тега (HTML), в конце добавляется лишний символ ">"? например должно

..

а выходит

..

>, кто с этим сталкивался? как решили проблему?заранее спасибо.
loac
2013-12-18 22:05:25
ZenCoding теперь разрабатывается под названием Emmet.
2013-12-18 20:42:42
А где взять зенкодинг для 3 версии
loac
2013-02-11 00:42:00
Давно уже. Надо будет подкорректировать заметку. Спасибо.
2013-02-11 00:14:37
А разве этот проект не переименовался в Emmet?