Zen Coding и Vim






Те, кому по роду своей деятельности доводится частенько создавать и редактировать HTML-код, вероятно знакомы с такой штукой, как «Zen Coding». Zen Coding представляет из себя набор сокращений, благодаря которым можно на порядок увеличить производительность авторов XML-подобных документов. Данная заметка посвящается тем, кто вообще впервые слышит о Zen-Coding, а также тем, кто успешно использовал его в других редакторах и хотел бы получить это счастье в старом-добром-любимом Vim.



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

Чтобы тем, кто впервые слышит о Zen Coding, было сразу понятно, какие «плюшки» они получат в результате, рассмотрим пару примеров.

Допустим, вы начинаете верстать новый HTML5-документ. С чего вы начнёте? Как правило с создания «скелета» документа, включающего в себя несколько строк. От документа к документу этот «скелет» остаётся одним и тем и набирать его вручную — занятие не из разряда полезных. Да, можно хранить шаблон где-то в файле и при создании нового документа просто копировать его оттуда при помощи буфера обмена. Но здесь опять возникает неприятный момент: найти файл, открыть, скопировать...

Пользователи Zen Coding имеют возможность создать новый HTML5-документ следующим образом. В новом файле вводится аббревиатура:

Нажимается определённая клавиатурная комбинация, и вуаля:

Или, например, вам нужно создать маркированный список из 5 элементов? Нет ничего проще:

лёгким движением руки превращается в:

Впечатляет? И это далеко не всё, что умеет Zen Coding! Прежде, чем приступать к изучению возможностей библиотеки, установим необходимый плагин в Vim.

Установка Zen Coding в Vim

Список плагинов Zen Coding для различных редакторов вы можете найти на странице загрузок проекта. Плагин для Vim живёт на GitHub и вы можете либо скачать zip-архив с плагином, либо получить его при помощи git:

Установка плагина заключается в копировании двух каталогов в каталог ~/.vim:

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

Принцип работы Zen Coding основан на т. н. аббревиатурах — сокращениях, из которых Zen Coding умеет строить код, или «расширять аббревиатуры».

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

Откройте новый файл:

перейдите в режим вставки и введите:

теперь (обратите внимание на то, где находится курсор), используя клавиатурную комбинацию <c-y>, (Ctrl + y + запятая), расширьте аббревиатуру:

Zen Coding «знает» массу HTML-тэгов и корректно их расширяет из аббревиатур. Например, аббревиатура

будет расширена в

а, например

будет расширена в

поскольку аббревиатуры совпадают HTML-тэгами, сложности в их использовании возникнуть не должно.

Селекторы

Расширение аббревиатур — это, конечно, здорово, однако имея в распоряжении только их, сильно производительность кодинга не увеличишь. К счастью, Zen Coding умеет работать с селекторами (очень напоминают и максимально приближены по смыслу к селекторам в CSS).

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

# (решётка)

Этот селектор, как вы уже могли догадаться, используется для определения идентификаторов элементов. Например:

будет преобразовано в

. (точка)

Этим селектором определяется CSS-класс элементов. Например:

будет преобразовано в

> (символ «больше»)

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

будет преобразовано в

или, например:

будет преобразовано в

[] (квадратные скобки)

На примере тэга img вы увидели, что Zen Coding умеет автоматически вставлять атрибуты некоторых тегов. Используя селектор [], вы можете самостоятельно определять атрибуты тэгов и их значения. Например:

будет преобразовано в

или, например:

будет преобразовано в

| (вертикальная черта)

Zen Conding, начиная с версии 0.6, поддерживает использование т. н. фильтров, которые позволяют выполнять некоторые преобразования после того, как выражение Zen Coding будет преобразовано. Давайте посмотрим, как это работает, на примере использования фильтра «e» (escape):

будет преобразовано в

С полным списком фильтров Zen Coding вы можете ознакомиться на соответствующей странице проекта.

+ (плюс)

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

будет преобразовано в

Во втором случае селектор «+» используется для построения минимально-завершённой структуры некоторых элементов. Например:

будет преобразовано в

* (звёздочка)

Как можно догадаться, глядя на символ селектора, он используется в качестве мультипликатора элементов. Например:

будет преобразовано в

$* (доллар и звёздочка)

Иногда бывает необходимо создать несколько элементов с разным значением какого-то атрибута, при этом значение нужно последовательно пронумеровать. Нет ничего проще:

будет преобразовано в

Объединение селекторов

Конечно же, вся мощь Zen Coding кроется в одновременном использовании селекторов, позволяющем за один присест генерировать сколь угодно большие объёмы структурированного кода. Например:

будет преобразовано в

а выражение

развернётся в

Или, например:

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

Резюме

Zen Coding является отличным инструментом для повышения производительности труда верстальщиков XML-подобных документов, и потраченные 15 минут на изучение и установку плагина в вашем редакторе с лихвой окупятся уже через час. Получить больше информации вы, как всегда, можете на сайте проекта по адресу http://code.google.com/p/zen-coding/. В одной из следующих заметок я расскажу о некоторых фишках плагина Zen Coding для Vim.




Zen Coding и Vim: 1 комментарий

Комментарии запрещены.