Komodo Edit. Часть 5: Включаем турбонаддув. Инструменты и настройки эффективной работы.

Окончательно смирившись с тем, что серия постов о Komodo Edit всё больше напоминает не солидный гайд для начинающих, а лоскутное одеяло, формируемое по мере поступления лоскутов, автор решился сразу на две вещи:
во-1-х, на явный и осознанный отказ от логики руководства в пользу тематических обзоров, и
во-2-х, на включение в серию кумулятивной странички-шпаргалки, в которой будут постепенно накапливаться разные советы и подсказки, не попавшие на основные страницы.

Нынешняя 5-я часть будет о настройках, приемах и инструментах, ускоряющих и повышающих удобство html и css-кодинга. А если это пригодится начинающим php-, python- и иным программистам, тем лучше.

Организуем быструю и удобную работу

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

А уж теперь пройдемся по этим пунктам.

В первую очередь нам придется немножко разобраться с терминологией: что такое автозавершение, автодополнение, колтипсы. Тут многие путаются, и я в том числе, путаница усугубляется языковыми многозначностями как в русском, так и в английском, а нам нужно как-то определиться, чтобы понимать, о чем мы говорим в том или другом случае.

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

Если в "Настройках → Умное редактирование" установить галочку на "Использовать Tab для завершения слова как_KEY_", то по Tab редактор будет циклически подставлять известные ему слова, начинающиеся на введенную букву. Что значит "известные ему"? Это значит те слова, которые уже есть в данном документе (в том числе имена классов и идентификаторов).
Кроме того, справка предупреждает, что клавиша Tab может использоваться и для других целей, например, ввода символа табуляции, если редактор не найдет слова для автозавершения или решит, что завершать тут нечего.
Если не устанавливать галочку на "Использовать Tab для завершения слова как_KEY_", то автозавершение всё равно будет доступно по комбинации "Ctrl + Space".

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

Однако нас гораздо больше волнуют другие стороны автозавершения, например, автозакрытие скобок (включая закрытие тегов) и кавычек. Так что к настройкам в секциях "Настройки → Code Intelligence" и "Настройки → Умное редактирование" надо отнестись со всей серьезностью.
Так, в секции "Настройки → Code Intelligence" я отмечаю галочками все возможные настройки (выше "API Каталогов"). В "Настройки → Умное редактирование" я обязательно включаю "Использовать мягкие символы" и "Использовать мягкие символы внутри строк". Именно эти настройки обеспечивают автозакрытие скобок и кавычек в конструкциях типа <div class="|", когда после ввода первой кавычки выводится вторая, а курсор остается между ними.

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

Чтобы понять, что такое автозаполнение, посмотрим картинки:

Как только в css-файле, в секции свойств некоего элемента, мы ввели букву, редактор выбросит нам выпадающий список-подсказку, где активным является первое свойство на введенную нами букву. Если мы нажмем энтер, то будет введен fit:, а если продолжим печатать, то редактор уточнит подсказку, что мы и видим на второй картинке.
Перемещаться по списку и вводить нужное можно как мышой, так и клавишами-стрелками и энтером. Если выпадающая подсказка случайно закрылась (например, вы шлепнули мышой куда-то мимо), ее можно принудительно вызвать кейбиндом Ctrl + J. Если нужно ее принудительно закрыть – Esc.

Этот механизм в связке с плагином Emmet, которого мы коснемся позже, является самым мощным орудием в написании и правке html и css кода. Даже несмотря на свои недостатки, главным из которых является то, что мы не можем (по крайней мере, простым способом) отредактировать списки тегов, свойств, атрибутов и т.д., выдаваемых нам редактором для автозаполнения. Так, в выпадающем списке атрибутов тега <a> мы не найдем target, и если часто им пользуемся, придется нам делать на него сниппет (что, впрочем, не трудно). Кроме того, я до сих пор не нашел управу на энтити, хотя аддон "HTML Tools" несколько облегчил положение.

По сути, нам доступна одна-единственная настройка автозаполнения: в "Настройки → Code Intelligence" мы можем изменить максимальное количество строк, показываемых для автозаполнения (у меня, как видите выше, их семь, а по умолчанию пять).

Я часто грешу тем, что автозаполнение называю колтипсами, но на самом деле это разные вещи.
Колтипсы мы практически и не увидим в работе над html и css-файлами, зато в php, javascript или других текстах они могут играть заметную роль. Посмотрите пример:

Ясно, что в данном случае выводится не список для выбора (или не только он), но именно подсказка. Однако поскольку мы сейчас не намерены касаться применения Komodo Edit как IDE, вникать в колтипсы мы пока не будем. Просто приведу еще одну картинку, показывающую, что произойдет, если в javascript-файле после набора function нажать пробел:

К другим встроенным инструментам можно отнести горячие клавиши, рассмотренные ранее, сниппеты и макросы, о которых уже писал Алексей Федорчук и которых, возможно, я еще коснусь отдельно. Сейчас ограничусь несколькими словами о сниппетах.

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

Вся работа со сниппетами сосредоточена в панели "Набор инструментов" ("Toolbox"), куда можно попасть из меню "Вид → Вкладки и панели" или дефолтным кейбиндом Ctrl+Shift+L, или же просто дважды кликнув по заголовку вкладки.
А уж там можно делать со сниппетами практически что угодно. Мне пока не удалось придумать, чего бы я хотел с ними сделать такого, чего не предусмотрел Komodo Edit. Может, у вас фантазия богаче

Под встраиваемыми инструментами я подразумеваю аддоны, или расширения.

В отношении расширяемости Komodo Edit очень похож на Firefox, что и не удивительно: родня все-таки. Из меню "Инструменты → Дополнения" нам откроется весьма знакомая картинка:

Правда, вкладка "Получить дополнения" нас разочарует: в списке рекомендуемых всего четыре фигуранта (на текущий момент), а главное, нету ссылки "Посмотреть все". Ничего, сами найдем. Вот, пожалуйста: http://community.activestate.com/addons. Правда, Defman (спасибо ему) отметил, что эта страница устарела и, возможно, будет удалена, поскольку параллельно с ней существует новая: http://komodoide.com/resources/, но пока мы можем пользоваться обеими.
Здесь их много, но, в отличие от Firefox'a, никто не будет вас предупреждать заранее, что данное расширение не совместимо с вашей версией Komodo Edit. За этим следите сами. Ну, и кроме того, "не тащите в рот всё подряд, не маленькие"

Совершенно необходим и ничем не заменим Emmet (трижды имхо). Тому, кто знаком с этим замечательным инструментом, ничего не надо рассказывать и доказывать, а кто не знаком, тех я призываю срочно ликвидировать этот пробел в образовании. Материалов в интернете по Эммету, включая статьи на Хабре и ролики на Youtube, прорва.

Кроме него, я ставлю уже упомянутый HTML Tools, который недавно обновился, и DOM Inspector. Кроме того, Defman обращает моё и ваше внимание на аддон Auto Toggle Panes Натана Рийксена (Nathan Rijksen). Механизм этого аддона, кстати, "идеологически" очень близок DE Cinnamon, и те, кто привык к "горячим углам", при наведении на которые в Минте включается режим "Экспо", наверно, найдут вполне органичным и естественным, что в Komodo панели появляются/скрываются при появлении мыши возле их расположения.
С остальным вы, как заинтересованная сторона, разберетесь сами, хотя, возможно, я еще вернусь как-нибудь к теме аддонов.

Установка расширений не представляет никаких сложностей. Если расширения нет в "рекомендуемых", его следует скачать, а затем файл .xpi открыть в Komodo Edit, после чего перезагрузить редактор.

К браузеру, которым вы пользуетесь как основным, необходимы хорошие инструменты для веб-разработки. В отношении Firefox всё ясно: Firebug и его плагины. Кроме того, мощная и удобная ColorZilla, предоставляющая ряд замечательных инструментов для работы с цветом, а на ее сайте можно легко сделать самый замысловатый градиент безо всякого фотошопа, и тут же получить его css-код.

Из системного ПО: графический редактор (Gimp, ясное дело), цветопробник (GColor2, например), линейка (я традиционно использую кде-ешную KRuler), иногда может понадобиться какой-нибудь линкчекер (увы, хороших мало; смотрите linkchecker) и т.д и т.п.

Это, разумеется, не окончательное и непререкаемое руководство, а скорее наводка, в которой упомянуто далеко не всё. Каждый веб-мастер, даже едва начинающий, сам быстро разберется, что ему надо, подберет и выработает свои приемы, инструменты и привычки. Сосредоточенные вокруг Komodo Edit, эти инструменты дают возможность комфортно и быстро, а значит, и с удовольствием осваивать искусство создания веб-страниц. Успехов вам в этом интереснейшем, хоть и не простом деле!