Если вы еще не слышали про Zen Coding, значит, пора вам об этом узнать, так как штука уже не новая. Zen Coding — новый способ написания HTML и CSS кода, используя метод разметки CSS. Плагин Zen Coding поддерживается большинством популярных редакторов, я же расскажу, как это установить для Notepad++ и Eclipse.

Про установку Zen Coding на Notepad++ я рассказывать не буду, так как рассказывать там нечего и все делается как обычно. Хотя вот с командными клавишами не порядок, но об этом читайте ниже.

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

1. Скачиваете вот отсюда архив, названный “Zen Coding for Aptana”.
2. Для его работы нам потребуется плагин EclipseMonkey, однако, если вы используете комплект Aptana, то у вас это уже есть. Плагин EclipseMonkey берем по этой ссылке:
   http://download.eclipse.org/technology/dash/update
3. Далее создаем проект с названием, к примеру: zencoding
4. В нем создаем папку scripts
5. Помещаем в эту папку содержимое архива, скачанного в п. 1
6. Перезапускаем Eclipse

Новая инструкция

Устанавливать заранее теперь ничего не нужно. Страница проекта теперь находится тут. Устанавливаете плагин для Eclipse, как обычно:

1. Через менгю Help → Install New Software… и вписываем этот адрес:
   
   http://zen-coding.ru/eclipse/updates/
2. Нажимаем «Далее», пока не установится.
3. Перезапускаем Eclipse.

Установка закончена, теперь можно работать.

Как использовать Zen Coding

Создаете, к примеру, HTML файл в любом проекте или любой файл в Notepad++ и пишете/вставляете следующее:

Далее, чтобы получить желаемое:

• в Notepad++ ⇒ в основном меню Zen Coding → Expand Abbreviation и вуаля!
• в Eclipse ⇒ в основном меню Scripts -> Zen Coding → Expand Abbreviation

Примерчик с кодом, что выше

Для написания CSS так же есть короткие коды, например:

Описание основных приемов вы найдете там → Actions:Brief description of Zen Coding actions, а так же, думаю, на любом видео сервисе вы сможете найти видео с примерами работы Zen Coding.

Все возможности смотрите в файле Zen Coding.js.

Что-то не так?

Основные проблемы возникают с горячими клавишами и в Notepad++ и в Eclipse. В списке горячих клавиш Notepad+ эти клавиши не значатся, но, тем не менее, вместо ожидаемых результатов:

• Ctrl + E → ENQ — Enquire. Прошу подтверждения
• Ctrl + Shift + E → SOH — Start Of Heading, начало заголовка

Чтобы перевести меню и задать другие горячие клавиши посмотрите в конец файла Zen Coding.js… может, кому и удастся «придумать» свободные клавиши, либо погуглить — есть решения заменить E на Space.

В Eclipse же предназначенные клавиши уже заняты и при желании их можно освободить или же изменить. Я предпочла освободить. Для этого идем в Preferences ⇒ General ⇒ Keys:

• нажимаем S > w и смотрим “Switch to editor” → меняем/освобождаем → освободилась Ctrl + E
• нажимаем R и смотрим “Quick Switch editor” → меняем/освобождаем → освободилась Ctrl + Shift + E

Быстрого вам кодинга, друзья!

Ссылки

Zen Coding — a new way of writing HTML and CSS code
Installing Zen Coding in Aptana/Eclipse