Zen Coding

28 октября ’08

Обещанные пакеты настроек (bundles) для TextMate наконец-то готовы для всеобщего использования на странице проекта Zen Coding:

Zen HTML, версия 1.0 — описание возможностей
Zen CSS, версия 1.0 — описание возможностей

Изначальная версия обоих пакетов — 1.0, в дальнейшем она будет формироваться по принципу: первый индекс (n.0) увеличивается в зависимости от внедрения новых возможностей или серьёзного пересмотря существующих, второй (1.n) обозначает исправление ошибок или добавление группы новых сокращений.

Что касается развития и поддержки пакетов — всё максимально открыто для новых идей и улучшений. Ограничения могут касаться только ключевых принципов, основанных на собственном стиле написания HTML и CSS-кода — они, скорее всего, останутся нетронуты, либо появятся возможности простой настройки пакетов под другие стили написания кода.

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

Уточню что я имел ввиду говоря про зипники:
1) В таком виде жутко неудобно кастомайзить.
Значительно удобнее если бандл лежит гденить в git например. Я его себе форкаю, переделываю что хочу, а когда он обновляется — просто вытягиваю изменения к себе. Вместо того чтобы сливать новую версию, распаковывать, применять изменения, итд.
2) Не очень удобно обновлять и следить за обновлениями. Есть чудесные тулзы вроде http://yehudakatz.com/2008/05/19/textmate-gem/

PS: 10 раз это не так, так это раз 9, не больше =)

Оу, тогда понятно о чём речь.

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

А пока — zip, который жмёт почти в 10 раз ;)

Отлично, а будет читлист какойто? Понять хоть где конфликты с другими бандлами по хоткеям. Да и на стеночку приколоть.

e-texteditor zen html проглотил на раз

а вот css ни в какую не жует (

обидно

Николай, как временным читлистом можно пользоваться самим редактором бандлов в TextMate: выделяете сам бандл и справа появляется список команд и сокращений. А в качестве отдельных документов — да, планируются.

Добрый, чертовски жаль. Особенно потому, что никакой серьёзной разницы с моей стороны в них нет, видимо, проблемы возникли с поддержкой базовой части бандла, которую я скопировал из оригинального.

Черт, какойто у вас глюк в вордпрессе тут - пишет "не заполнил типа имя и емайл", хотя заполнил, и все что написал пропало.

Ну, еще разок...

Есть еще прога KeyCue которая если подержать cmd выводит список всех хоткеев текущего приложения, в tm забавно выглядит.

Но печатный лист всеже лучше чем в bundle editorе изучать.

Было бы круто писать ul+4 и получать 4 вложенных li. Аналогично с другими шорткатами.
Не знаю можно это реализовать или нет, но удобно было бы писать:
ul-a-span+ и получать список со вложенными ссылками и спаном.
Это что первое в голову пришло.
А так, спасибо Вадим, все очень круто.

Chupa, прям мысли мои читаешь =)

Да вы тут целый jQuery придумали :) Отличная идея, я попробую. Но наверное сделаю такое через описание полного пути, т.е. ul-li-span-a+ — чтобы сокращение можно было не только запомнить, но ещё и додумать.

pepelsbey, ну не jQuery, но всеж думаю будет круто, если получится реализовать это.
А я вот решил все таки заточить под себя интайп, за неимением альтернативы нормальной +)
А вот как перейду на макось, так и опробую твой zen )

Было бы круто писать ul+4 и получать 4 вложенных li. Аналогично с другими шорткатами.

Я тут на скорую руку залабал команду, которая реализует эту штуку:
Auto Lists Command

При добавлении команды нужно выбрать "Input: Selected Text or Line", "Output: Insert As Snippet", "Scope Selector: text.html" ну и собственно повесить на какое-нибудь сочетание клавиш.

Вроде работает :) Поддерживаются как нумерованные так и ненумерованные списки. Полностью заменяет сниппеты ol+, ul+ (если числа после плюса нет, то сгенерирует один li). Из минусов — активироваться может только по сочетанию клавиш.

Panya, красота ) поражаюсь мощности TextMate + Ruby. Но наверное вариант «написать + нажать-сочетание» слишком сложен. Лучше прописать нужное количество сниппетов на каждую конструкцию ul+2, ul+3, ul+4… до определённых пределов )

К слову сказать, я был бы очень рад использовать ваши познания в Ruby и любовь к TextMate в одной задумке для Zen CSS. Речь идёт о сортировке правил по шаблону. Т.е. на входе у нас есть определённый идеологически верный список следования правил, на основе которого, после нажатия сочетания клавиш, срабатывает сортировка выделенной группы правил.

Это была бы отличная фича для поддержания код-стиля для команд, где подобное практикуется. Как думаете?

За неимением TextMate ищу редактор с подобным функциональм для Windows :-)
Кстати, на официальном сайте TextMate и во многих примерах использутся именно руби, можно использовать только его? Или можно, примеру, и на Питоне и Перле писать подобные расширения? Вообще, глядя на эти обзоры просто завидую белой завистью тем, кто может использовать TextMate :-)

Если не ошибаюсь, можно использовать любой язык, что предустановлен на Mac OS X: Ruby, Python, PHP, Perl… Если так сильно хочется попробовать, могу порекомендовать Хакинтош — установку Mac OS X на любую Intel-машину. Насколько я понимаю, в этом деле уже очень сильно продвинулись. Но карму это портит )

smmurf, есть e - texteditor и Intype =)

pepelsbey, помоему это извращение
лучше уж купить себе железо яббловское и макосью =)

Не универсально, конечно, но для себя я точно сделаю что-то подобное,
layout:3 превратится в классический трехколонник:
body
header
content
aside
main
extra
footer

Добрый, многие начинают с хакинтоша. Покупать дорогостоящие машины без предварительного знакомства не каждый осмелится.

Chupa, и правда универсальность невелика. Попробовал, кстати, с ul+4 — вполне удобно.

А ещё возникла мысль сделать бандл совсем по другому принципу — слушать клавишу Tab каким-нибудь сниппетом и обрабатывать конструкции, которые до. В этом случае можно будет и правда полноценный CSS Query сделать…

Chupa, в этом плане мне значит повезло.
посчастливилось юзать ibook g4 и g3 =)
Макось — это мегакрутая ось, в ней все интуитивно понятно, не то что в винде)

Не понял, что ты имеешь ввиду под CSS Query?

CSS Query — это обращение при помощи CSS-синтаксиса к DOM. Эмулировано в jQuery — $('#page ul li a') и кажется уже нативно поддерживается Firefox.

Так вот, если всё получится, то можно будет развернуть такое — div#page-span-span.icon в соответствующее дерево HTML-элементов по нажатию Tab'а.

Кстати, что касается конструкций вида ul+3, то подход, который использован в InType мне видится более элегантным - похоже, там добавлен снипет, который создает новый элемент списка по шоткату [TAB]. То есть мы развернули список, заполнили его элементы, на последнем жмем [TAB] и переходим в конец конструкции .

Далее жмем [TAB] и добавляем новый пункт, заполняем его, жмем таб дважды и создаем новый пункт... Можно довольно длинные списки заполнять практически без задержек, мне показалось удобно.

P.S: не хватает у вас в блоге предпросмотра — вот сейчас отправляю, и не знаю, отобразятся ли теги…

Не отобразились вообще. Там шоткат на закрывающий li имелся в виду.

Ну это было бы просто супер.

smmurf, в данном случае, если все элементы списка одинаковые, то стоит наверное воспользоваться хоткеем клонирования строки (ctrl+shift+d)

Можно, конечно, это просто один из вариантов.
Хотя если мы заполним пункт списка и клонируем строку - то клонируется ведь и его содержимое? Придется его удалять. А если клонируем пункт пока он пуст - придется возвращаться. А так наполнение идет «потоком». Впрочем, я просто предположил, что кому-то и этот подход покажется удобным, не утверждаю, что он самый лучший и единственно правильный.

smmurf, здесь речь скорее не о том, что удобно, а о том, что получится сделать для TextMate — я не уверен, что подобный сниппет с дубликатами строк по табам вообще возможен.

Наверное мы не совсем друг друга поняли — в сниппете ничего дублировать не надо.
Просто, допустим, ul+ разворачивается в список из 2-х элементов (потому что список из одного элемента противоречит семантике списка), при этом $0 стоит за последним закрывающим li. Затем в работу вступает другой снипет, который вызывается нажатием табуляции после закрывающего /li, и заменяет его на закрывающий li, перевод строки и новый пустой элемент списка. Надеюсь, понятно объяснил.
Если в TextMate в шоткатах сниппета можно использовать символы больше, меньше и слэш — думаю, должно сработать.
Прошу прощения за настойчивость. :-)

Ага. Теперь понятно, попробую. По правде говоря, спасибо вам за настойчивость )

Pepelsbey, можно попробовать, но нужно уточнить правила сортировки и другие детали.

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

не знаю можно ли так сделать, но в общем то было бы лучше, если при вводе: div-tab-cmd+3 айдишник ставился не внутри дива, а на свое место.

Черт, я уже жалею, что не профессиональный верстальщик :)

Очень прикололо, удалил дефолный html бандл, но возникли вопросы:

HTML:
a:selected как используется? вобще для чего эти :selected хоткеи?

Например, для чего shift+cmd+b - b:selected?
У меня на этом месте Select balanced tags – отличная вешь чтобы выделить весь родительский div, и его родителя, и его родителя...
Можно сразу посмотреть начало и конец блока, ну и редактировать очень удобно.

Что такое tag:double? Написано ctrl+

во черт глючит форма

Что такое tag:double? Написано ctrl+< – т.е. ctrl+shift+, ? У меня это "Сonvert to tag", незнаю уж откуда, html бандл отключил

cmd+2,3,4 (это attr:class attr:id attr:style – добавление id="") - отлично
opt+space - тоже

convert: cmd & – может назвать convert:entities convert:htmlchars как в php скажем. Правда я их сам путаю, может текущие и неплохие описания

группа html:*, link: и script - большое спасибо
cc:ie - клево тоже

CSS:

Может некоторые сокращения я бы переделал, но в целом – отлично.

p:4 может сделать вместо p? Т.е. по умолчанию чтоб было padding: x x x x, margin: x x x x.

Не понятно, как делать cmd+enter - тоесть вставка строки после текущей. Cовершенно точно надо вернуть cmd-enter, а вставку скобок можно поставить на скажем fn+enter (return) или с option-enter, например

линк забыл - select balanced tags:

http://subtlegradient.com/articles/2007/11/15/select-balanced-html-tag

Николай:

*:selected — это шорткаты к частым строчным элеметам вроде B, STRONG, I, EM, они основаны на традиционном I (italic) B (bold), поэтому назначены такие шорткаты. Учитывая то, что Cmd+Shift+B — это не дефолтный критический шорткат из TextMate, у меня есть право использовать его, кстати — вполне логично.

tag:double — эта штука из стандартного пакета, которая вставляет пару закрытый/открытый тег, которые потом можно редактировать одновременно. Учитывая то, что вы скорее всего просто отключили HTML-бандл, а не удалили его полностью, вы можете включить его одновременно с этим и попробовать сравнить.

Насчёт p:4 — мне хотелось бы сделать эти пакеты максимально гибкими, т.е.: хочешь использовать по минимуму — используй только для свойств/элементов, хочешь по максимуму — используй готовые конструкции. Иначе говоря, я гарантирую право выбора методики.

Cmd+Enter — я пока не придумал более удобного шортката для вставки фигурных скобок одной рукой, удобного своей ассоциативностью с переводом строки. В TopStyle я использовал кажется Ctrl+{ — эта штука занята сдвигами tab'ов, так что пока Cmd+Enter.

Написал команду для сортировки. Правила взяты отсюда. Если их не расширить, то сортировщик будет «спотыкаться» о неизвестные свойства :) В остальном, кажется, работает.

Сделал тут на днях команду для сортировки блоков деклараций в CSS правилах:
Sort Rules By Template

При добавлении команды указать: "Input: Selected Text or Document", "Output: Replace Selected Text", "Scope Selector: text.css" ну и назначить какое-нибудь сочетание клавиш.

Для использования команды нужно выделить блоки правил, вызвать команду, написать в диалоговом окне шаблон сортировки правил (указать только порядок свойств, свойства разделяются переводом строки, свойства указывать без значений), нужно указать как можно больше свойств. Нажать ок. Внимание! Это бета-версия, используйте на свой страх и риск :) Очень жду комментариев насчёт работы команды.

Спасибо! Надо попробовать записать это на основе своего код-стайла.

Александр, :D

С обновлением =)

pepelsbey, можно сделать проверки на пробел после ':' и перед '}'. На скорую руку набросал: http://pastie.textmate.org/306702

Panya, ваш вариант кажется мне лучше :) Только его надо допилить, как следует :)

Первый багрепорт: http://pastie.textmate.org/private/macjxapqyhnzpgreayeaog

Не учитывается код-стайл, как и у меня (пробел после ':', таб перед '}'). Сбивается индентинг; последний тест не сортируется почему-то.

Александр, большое спасибо) Поправил оба бага. Дело в том, что раньше разделитель деклараций и значений запоминался глобально для всего выделенного текста, поэтому с таким динамическим код-стайлом, как у Вадима это могло покорежить отступы в коде, насчет второго бага, такие селекторы он просто не находил (нехватало запятой в символьном классе регекспа), теперь же все нормально. Обновленную версию команды брать тут

Поправил еще один неприятный баг, теперь команда не спотыкается на пустых правилах (без деклараций). Брать тут.

Panya, отлично! :) Ещё нашёл баг: http://pastie.textmate.org/private/zw6uwj7w7sbdugwhybg05q

Выделение меньше 2 строк можно даже не пытаться сортировать. Одно свойство тоже :)

Вадим, я попытался распаковать TextMate.Zen.HTML.1.3.zip под виндой, но она не
разрешает символ ' * ' в именах файлов. Если я переименую эти файлы, это как-то скажется на функциональности?

Сергей, боюсь, что да — кажется они привязаны к файлу настроек именно по имени. Но я не уверен, стоит попробовать.