Вёрстка в IntelliJIDEA. Часть №2
Это вторая часть моего доклада, который состоялся 31 января 2009 года в рамках Яндекс.Субботника.
В первой части статьи мы поговорили о том, что IntelliJIDEA — это среда разработки для Java, которую можно несложным образом приспособить для клиентской верстки. Мы разобрали, как единожды создать IDEA Project и как сделать так, чтобы разработка каждого последующего Нашего Проекта не требовала делать это заново. Еще мы поговорили о том, что интерфейс IDEA интуитивно понятен и привычен. И при этом смотрели на такой слайд.
Но есть момент, на который я сознательно не заострял внимание на презентации.
А именно, после создания IDEA Project в Project Panel мы видим сразу вот такую картину:
То есть мы видим не только те самые физические сущности IDEA Project-а, но еще и Libraries, которые нужны для Java-проекта. А нам их видеть крайне нежелательно. Чтобы не видеть этих файлов, нужно сменить View:
- По умолчанию он установлен в вид IDEA Project
- Выбрать нужно вид Scope: Production
А сейчас я предлагаю Вашему вниманию вторую часть презентации "Вёрстка в IntelliJIDEA".
Часть вторая
Девиз: Забудьте про рутину
За всеми фичами Идеи, о которых я расскажу, я хочу чтобы не потерялась одна мета-фича. В чем она?
IntelliJIDEA умеет отвечать на вопросы разработчика. Она отвечает на все явные вопросы, которые я ей задал явно. Ну, то есть, я попросил её что-то сделать — она сделала. И ещё она отвечает на множество неявных вопросов, которые я ей сам не задавал, но ответы на которые меня интересуют постоянно.
Без примеров не сильно понятно, поэтому я раскрою свою мысль понятной аналогией.
Что такое Яндекс? Яндекс — это такая компания, основная задача которой — давать ответы на вопросы пользователей.
На какие вопросы отвечает Яндекс?
- На вопросы явные.
Это вопросы, которые пользователи задают в поисковой строке, а Яндекс отвечает на них на страницах результатов поиска.
- На вопросы неявные.
Например, «какая сегодня погода», «происходит ли сейчас что-то важное», «можно ли проехать по городу». Яндекс отвечает на них своими справочными блоками на главной странице портала.
Ну вот, поведение IntelliJIDEA очень похоже на миссию Яндекса ;) Только у Яндекса ответ на вопрос пользователя — это информация, а у IntelliJIDEA ответом на вопрос разработчика является конкретная помощь.
А чем физически выражается вёрстка? А она выражается некими действиями, которые разработчик совершает своими пальцами, работая над неким кодом.
А чем физически выражается код? Такими многослойными абстракциями, как файлы кода, литеральное представление кода и структурные элементы кода.
То есть, если попытаться классифицировать действия, совершаемые над кодом, то я могу выделить три группы действий:
- Работа с такой абстракцией, как файлы Проекта. Например, копирование, переименование, поиск и другие действия с файловой системой
- Работа с такой абстракцией, как литеральная запись кода. Я имею в виду работу со строками файла + функции систем контроля версий
- Работа с такой сущностью, как структурные элементы кода. Я имею в виду нюансы работы с конкретным кодом (HTML/CSS и др.)
Хорошая IDE для каждой из этих групп предоставляет некие фичи, которые облегчают выполнение этих действий.
Живое Целое
Но IntelliJIDEA двинулась дальше — она не проводит разделения кода на группы, она работает с Проектом, как с Живым Целым. Звучит это странно, но Java-разработчики меня прекрасно понимают. Я поясню, что имел в виду.
В то время, как большинство редакторов работают с Проектом, как с отдельными сущностями файлов на файловой системе, IntelliJIDEA с файловой системой не работает. Идея работает со своими кешами, в которых хранится копия-слепок файлов Проекта. Oops?
Выглядит это так: когда вы поднимаете утром IntelliJIDEA, она загружает в память IDEA Project, который мы создали в первой части статьи. "Загружает" означает буквально следующее:
- Идея смотрит в IDEA Project File, находит в нём информацию о том, какие IDEA Modules в нем описаны.
- После этого смотрит в IDEA Module File и ищет путь к Content Root.
- Затем переходит на файловой системе в этот Content Root и всасывает файлы Нашего Проекта в свои кеши. Всасывает и при этом индексирует.
"Индексирует" означает выявляет взаимосвязи файлов Проекта на основании анализа структурных элементов кода. Именно благодаря этому в IntelliJIDEA есть, к примеру, такой мощный инструмент, как Инспекторы Кода.
Я приведу несложный пример. Например, индексация дошла до файла index.html.
- Идея этот файл всасывает в свои кеши
После чего его парсит и, например, встречает в нём подключение стилевого файла
- Внутри своих кешей Идея регистрирует взаимосвязь между файлами index.html и idea.css
- После этого смотрит в файл idea.css и запоминает CSS-селекторы, которые в нём описаны.
- Потом сравнивает селекторы из файла idea.css с именами классов у HTML-элементов в файле index.html
- И если в idea.css есть неиспользуемые в index.html CSS-селекторы, то Идея об этом сообщит в заметной но ненавязчивой форме.
Я только что привел пример ответа Идеи на мой неявный вопрос: "Мои стили актуальны? Есть ли среди них рудиментарные селекторы, которые уже не используются, но болтаются под ногами во время разработки и выливаются в продакшн?"
Эта фича и многие другие были бы невозможны, если бы Идея не "всасывала" все взаимосвязи файлов Нашего Проекта в свои кеши, а работала с файлами, как с отдельными сущностями (как это делают многие другие редакторы)
Спешу успокоить тех из вас, кто уже озадачился: "Если Идея работает только со своими кешами, а не с файлами на файловой системе, то как тестировать в браузерах? Изменения в браузере отображаются не сразу?"
Сразу :) Как только IntelliJIDEA теряет фокус (вы переключились на другое приложение), происходит моментальная синхронизация кешей Идеи с файловой системой. "Моментальная" означает мгновенная, молниеносная... Придумайте еще более точный синоним :) Это происходит настолько быстро, что можно работать с Идеей годами и никогда не узнать про её кеши.
К слову, редактируя код, нет необходимости руками сохранять ваши изменения. Ctrl S можно забыть — ваши изменения сохраняются автоматически. И к тому же, никогда ничего не потеряется, потому что внутри IntelliJIDEA ведется Local History ваших изменений (но об этом чуть позже).
Сразу хочу ответить на еще один скептический вопрос: "Наверное, из-за постоянной синхронизации кешей и ведения Local History всё безбожно тормозит?" Нет, всё летает. Наши ребята из Питера — молодцы, умеют! :)
К слову, именно благодаря Живому Целому в xsl удобно навигироваться по шаблонам, которые связаны друг с другом через импорты. То есть, если вы используете
На этом общие характеристики я заканчиваю и перехожу к описанию конкретных бенефитов Идеи. Разбиение по главам формальное, в тексте к одной и той же фиче я могу подходить с описанием несколько раз в разных главах.
GUI and Settings
Интерфейс действительно привычен и удобен: основная панель для редактирования файлов, вспомогательные панели (типа Project, Structure, Changes), главное меню программы, тулбар с иконками для частых действий и контекстное меню по правому клику. Освоить его и, главное, модифицировать под свои потребности можно без особых усилий. Кастомизировать в GUI можно не всё, но многое. Мне хотелось бы ещё "таскабельности" табов, которой нет, но и без неё вполне можно.
В процессе описания я буду вас отправлять в Диалог Настроек IntelliJIDEA. Он находится в двух кликах мыши от нас File -> Settings. Или если пользоваться хоткеем, то еще ближе: Cmd,
Cmd, — это хоткей в Макоси. В винде, я честно признаюсь, хоткей не помню :)
File Templates
Как картина начинается с чистого холста, вёрстка начинается с нового файла. Создание файла в Идее ничем не примечательно.
Right Click -> New -> Выбрать шаблон
Примечательно, что предустановленные файловые шаблоны (которые идут в коробке) можно полностью модифицировать под свои нужды. А еще можно создавать свои шаблоны. Делается это в Settings -> File Templates.
В примере на скриншоте видны два дефолтных шаблона Html и Xhtml, внутри которых я описал некую заготовку для создания яндекс-файлов. В них я указал тот DOCTYPE, который используем мы, Meta X-UA-Compatible, который используем мы, подключение стилей по правилам, которые используем мы и т.д. Ничто вас не остановит, если вы захотите создать свои файловые шаблоны для XSLT, например.
Но в целом, File Templates (далее по тексту FT) не заслуживают пристального внимания — ничего сногсшибательного :) Того же результата можно достичь, если задействовать Live Templates.
Live Templates
Что такое Live Templates (далее по тексту LT)? Это некие текстовые шоткаты, которые по нажатию какой-то клавиши превращаются в соответствующий фрагмент кода. О них я еще расскажу ниже в аспекте создания элементов кода. LT тоже есть предустановленные, и есть возможность создавать свои. Использовать LT для создания каркаса новых файлов удобнее, чем FT. Удобнее тем, что они предоставляют возможность после разворачивания кода пройти по элементам кода в том порядке, который я выбрал и заполнить эти места.
Создать заготовку для создания яндекс-файлов можно набрав в файле текст "html" и нажать Tab. После этого создастся та же структура, что и при использовании File Template (неудивительно, это же я сам создал такой Live Template).
На скриншоте я показал стрелочками порядок обхода файлов. В каждой из точек Идея остановится и подождет, пока я не введу туда то, что посчитаю нужным.
В последней точке пути мы оказались в body документа. Задействуем еще раз Live Templates. Я создал свой LT для создания таблицы table -> Tab:
<table>
<tr>
<td>
</td>
</tr>
</table>
Surround, Folding and Code Style
После этого мы поняли, что нам для вёрстки необходим элемент tbody и обернули строку этим элементом. Для этого выделили строку и на Selection-е нажали Cmd Alt J. То есть обернуть можно любой элемент любым элементов. На скриншоте видны дефолтные "обертывания". Обертывание кавычками-ёлочками я создал сам, потому что надоело писать эти entities руками.
Обращаю ваше внимание на то, что обертывания особенно удобны в ситуации, когда у нас уже есть какой-то развесистый блок с непростой внутренней структурой детей. То есть, когда закрывающий тег блока находится в паре-тройке экранов от открывающего.
Я поясню моё утверждение на примере.
Представим, что нам нужно обернуть длинную таблицу с данными дополнительным div-ом. В классическом редакторе, типа notepad.exe, мы должны найти открывающий тег <table> и перед ним написать открывающий <div>. Потом пролистать экран вниз, глазами найти закрывающий тег </table> и написать после него закрывающий </div> А если код не ваш, а вашего предшественника? А если предшественник не структурировал код табуляцией? А если в его таблице ещё несколько вложенных таблиц, и всё вместе это кирпич нечитаемого кода? Представили свои усилия по исполнению обертывания, если вы пользуетесь notepad.exe?
А как это решается в IDEA? Неважно, как неряшливо ваш предшественник структурировал свой код; неважно, сколько вложенных таблиц в нём, и не важно сколько экранов код занимает. Всё это на себя берёт IDEA. А что делаем мы?
- Становимся курсором в открывающий тег
<table>, - Фолдим (схлопываем) таблицу по хоткею Cmd- и выделяем ее мышью
- Нажимаем знакомый нам хоткей Cmd Alt J и оборачиваем таблицу.
"Обернуть назад" тоже удобно: когда понадобится удалить div-обертку вокруг таблицы в несколько экранов, станьте на этот див и нажмите Shift Cmd Fn Backspace. И пусть макосёвые хоткеи вас не пугают — в винде они попроще.
Фолдинг — мощное средство, которое очень удобно использовать при рефакторинге развесистых структурных элементов. Призываю Вас использовать его так часто, как только сможете придумать.
Кстати, после обертывания в примере выше, вы бонусом получаете ещё и хорошо отструктурированный код. IDEA против неряшливости :)
Структурирование кода, конечно же, может быть вызвано не только в виде бонуса после обертывания, но и по нашему прямому указанию хоткеем Cmd Alt L. Структурирование происходит по неким правилам, которые мы можем подпилить под наши нужды — переводы строк, отбивку табами или пробелами и прочие. Эта возможность называется Code Style. Отныне работа с неряшливым кодом ваших предшественников более не проблема :)
DTD
Но вернемся к нашей простой задаче: мы обернули строку таблицы элементом tbody. А спустя какое-то время к нам пришел js-программист и сказал, что ему в JS было бы очень удобно некоторые группы строк оборачивать в отдельные tbody, чтобы легко получать доступ к ним.
Вот с таким вопросом ко мне пришел Женя Захаревич: "Можем ли мы это реализовать?" А я не знал, может ли таблица иметь несколько tbody по спецификации. Но знал у кого спросить — у IntelliJIDEA :)
Cmd Click на имени элемента провалил меня в DTD, в котором я очень быстро узнал, что tbody может быть сколько угодно. Осознайте этот момент: мне не пришлось идти в интернет, открывать соответствующую спецификацию HTML или XHTML, искать в ней раздел про таблицы, а потом еще читать по-английски. Я узнал это не уходя из Идеи за считанные секунды. Правда, для этого нужно уметь читать DTD. Но если вы пишете регекспы (и знаете что такое * + ?), то ... Несложно, в-общем.
Custom DTD
А можем ли мы использовать кастомные DTD? По сути, тут звучит сразу два вопроса:
- Есть ли поддержка кастомных DTD в IntelliJIDEA?
- Таки зачем оно нам надо? :)
Сразу разберемся со втором вопросом, как я его понимаю. Иногда хочется иметь возможность в своем HTML иметь кастомные атрибуты, к примеру, для удобной валидации форм яваскриптом. И при этом хочется, чтобы валидирующий инструмент, которым мы пользуемся для проверки своего кода, не ругался на них.
Как решение — написать свой DTD, выложить его в инет и в доктайпе своего HTML указать путь к этому DTD. Единственная проблема — браузеры не валидируют. Это означает, что браузер никогда не пойдет по указаному нами адресу к нашему кастомному DTD — он посмотрит в свою "внутреннюю" таблицу соответствий версии HTML и DTD. Поэтому наша страница с кастомными атрибутами будет невалидна в любом браузере. То есть в production оно таки нам не надо :)
А для разработки очень даже бывает надо. Когда? Раскрою свежий "Яндекс.Секрет" :) Сейчас развивается новая внутренняя технология, которая призвана облегчить взаимодействие HTML-верстальщика и XSL-верстальщика. Она называется ULL, ее автор Макс Максимов. Идею этой технологии я раскрывать не буду, но сказать пару слов о ней в разрезе кастомного доктайпа можно — эта технология добавляет в наш HTML-документ новые элементы разметки: кастомные атрибуты в своем неймспейсе ull.
Отслеживать правильность использования этих атрибутов мне самому не хочется. Я хочу, чтобы это делала за меня IntelliJIDEA. Для этих целей Максим создал кастомный DTD на основе XHTML 1.0 Transitional, в который добавил правила для ull-атрибутов. После того, как я подключил в документ этот DTD (на скрине видно, что в public identifier путь указан от локальной папки), Идея стала валидировать мои документы с учетом этого DTD и подсказывать мне правильность написания этих атрибутов.
Autocomplete
То есть, помнить написания этих ull-атрибутов мне уже не нужно — за меня это делает автокомплит. Автокомплит — ни разу не новшество, он появился в редакторах еще при царе Горохе. Но особенная вкусность автокомплита IntelliJIDEA в том, что он контекстный. Контекстный на основе DTD.
На скрине за скролом всех подсказок не видно, но я поясню — в подсказке нет ни одного блочного элемента. Потому что, как мы хорошо знаем из DTD, внутри параграфа могут находиться только строчные элементы. Или вот еще более конкретный пример:
Спецификация XHTML говорит, что в том месте, где на скрине стоит курсор, могут находиться только те 7 элементов, которые нам подсказывает IntelliJIDEA. По-моему, это ещё один удачный пример ответа на мой неявный вопрос.
Контекстный автокомплит исключительно вкусен в XSL.
XSL-переменные подсказываются исходя из области видимости переменной: та переменная, которая создана в конкретном шаблоне, будет подсказана только в этом шаблоне, в остальных шаблонах и в глобальной зоне видимости она предлагаться не будет.
И по аналогии с HTML, внутри <xsl:call-template> автокомплит никогда не предложит выбрать элемент <xsl:param>, потому что по схеме XSL внутри <xsl:call-template> элемента <xsl:param> быть не может.
А в XML-файлах IntelliJIDEA анализирует структуру редактируемого файла, и автокомплит-меню предлагает использовать уже существующие теги и их атрибуты. То есть IDEA как бы "самообучается"
И завершая тему autocomplete, два слова про подстановку путей к ресурсам: в HTML-атрибутах href="", src="" и в CSS-значениях url() Идея подсказывает пути к ресурсам с помощью autocomplete-меню.
Для вызова автокомплита используется хоткей Ctrl Space. Для Mac OS X тоже используется он, так как Cmd Space занят под смену раскладки клавиатуры.
File Encodings
Кодировка. Больная мозоль для многих и многих роботов — одни не умеют работать с UTF, другие не могут определять кодировку автоматически, третьи при сохранении файла перекодируют в другую... В IntelliJIDEA с кодировкой всё хорошо — она даёт разработчику свободу выбора по принципу "пиши в той кодировке, которая тебе нужна". Что тут рассказать? Перечислять баги других редакторов и говорить, что в Идее этих багов нет? В этом перечислении нет смысла. Короче, работая в Идее, можно никогда в жизни не задуматься о том, что файлы могут существовать в разных кодировках :)
А! Есть всё-таки две фичи, о которых рассказать надо.
Первая — для разных папок Вашего IDEA-Module можно указать разные кодировки.
На скрине видно, что я принудительно указал Идее работать с разными директориями в разных кодировках. То есть, к примеру, при создании нового файла в папке deployment, файл будет создан в кодировке cp-1251, а в папке intelijidea в кодировке utf-8. Нам это особенно актуально, потому что Проектов в Яндексе много. То есть, команд разработки тоже много, и у каждой команды могут быть свои предпочтения в выборе кодировки. Работая в команде, которая не хочет (или по каким-то причинам не может) перейти на utf-8, я один раз выставляю нужную кодировку и больше об этих проблемах не думаю.
А вторая фича — возможность конвертирования файлов из кодировки в кодировку прямо в интерфейсе IntelliJIDEA. Конвертировать можно как файл, директорию, так и группу из того и другого.
Browser Preview
Ну и вот, предположим, что у нас есть уже созданная страница в нужной нам кодировке и с каким-то фрагментом кода. И уже хочется просмотреть в браузере, как она выглядит. Какие есть быстрые способы это сделать?
- Панель прыжка в браузер. Попробуйте подвести мышь к верхне-правому углу Editor View в любом HTML-документе. Вы увидите всплывающую панель с иконками установленных у вас браузеров. Клик по иконке перебросит вас в браузер, в котором откроется ваш HTML-файл.
- С помощью хоткея Cmd Shift C в Идее можно скопировать полный путь файла на файловой системе в буфер обмена. То есть, открыть на редактирование файл и вызвать хоткей. Дальше переключиться руками в браузер и Cmd V в адресной строке
- С помощью Mozilla Preview Panel. В Идее есть встроенный Mozilla браузер — им можно просматривать верстку, не переключаясь в стендалон браузер. Но смысла в этом большого нет. Я вижу прямое назначение этой панели лишь в Javascript-дебагинге. Но об этом ниже.
System Version Control
Как я уже говорил в первой статье, в IDEA есть поддержка большого количества Систем Контроля Версий. Вы сами выбираете, какие их них использовать.
"Живое Целое" дает бонус IntelliJIDEA и для работы с Системами Контроля Версий. Что такое CVS/SVN и с чем их едят, уверен, не мне вам рассказывать. Вы пользуетесь ими ежедневно и командной работы без них не мыслите.
В чем же вкусность? Особенность? В том, IntelliJIDEA отслеживает любое изменение в файле и сообщает об этом в своем неповторимом ненавязчивом виде. Я остановлюсь на этом очень подробно.
После того, как я проассоциировал файлы IDEA-модуля Presentation с конкретным SVN-репозиторием, любое изменение файла отображается на левой панели Editor View цветными блоками (синими, зелеными) и серыми стрелочками.
Синий блок означает, что код справа от него изменён. Зеленый блок означает, что код добавлен. Серая стрелка говорит нам, что какой-то код удалён.
Эти блоки и стрелки кликабельны. Клик на них рождает малюсенькую панель с кнопками действий, которые можно совершить над изменённым кодом.
По клику на зеленый блок мы видим возможность Rollback — откатить назад локальные добавки.
Попросту говоря, удалить этот кусок. Понятно, что можно удалить и руками если он так же мал, как на скрине. Но если фрагмент кода велик, то быстрее удалить rollback-ом. Но это не только быстрее, а что важнее — надежнее — я точно уверен, что удалится только то, что не относится к последней ревизии этого файла. Еще мы видим синюю стрелку вверх, кликаем на нее и переходим на предыдущее незакоммиченное изменение.
Теперь слева не цветной блочок, а серая стрелка, что означает — в этой строке удален фрагмент кода. А в панели действий мы видим этот самый удаленный код.
Ну, синие стрелки, понятно, служат быстрой навигации по изменениям, rollback — тоже уже понятно. Следующая кнопка родит нам diff-окно, но о нем я чуть позже. А последняя кнопка панели копирует этот фрагмент кода в буфер. Бывает нужно.
По клику на синий блок мы видим ту же панель и фрагмент кода, который предшествовал текущему
Обратите внимание, что на правой панели тоже есть какие-то блоки светло-серого цвета.
Кроме светло-серых там могут появляться блоки других цветов, о которых мы еще вспомним. Но именно светло-серые блоки на правой панели имеют отношение к SVC — они сообщают лишь о том, что в такой-то строке кода произошло изменение и я его не закоммитил. И на первый взгляд это кажется сомнительной фичей. Но когда код страницы занимает несколько экранов, то быстро перемещаться к незакомиченным изменениям в коде очень удобно, потому что все изменения у меня на виду. Перемещение к измененной строке происходит простым кликом на светло-серый блок.
Вот, например, на такой странице по своим изменения навигироваться простым кликом быстро и удобно.
Local History
Почему-то, как у кого ни спрошу, почти никто не пользуется в IDEA такой фичей, как Local History. При этом называют такие причины:
- Идея жутко тормозит, если не выключить LocalHistory
- Зачем оно нужно, если есть SVC?
Давайте развенчаем миф про тормоза. Да, было. Если мне не изменяет память, когда-то давно разработчики IntelliJIDEA рекомендовали как временный воркэраунд отключать Local History. Но те проблемы давно решены и сегодня (версия 8.1) мне не известны проблемы производительности. Поэтому, не отключайте Local History, не лишайте себя такой клевой фичи.
Помните, мы говорили про кеши, как про некие слепки файлов? Эти слепки хранятся несколько дней назад. По умолчанию, три дня.
Если вы пользуетесь SVN, то соглашусь, держать историю больше, вроде как и нет смысла. Но если в вашей компании не хотят поднять svn/cvs сервер или использовать децентрализованное хранилище (о, git, как ты моден сейчас), то вас выручит долгосрочная Local History. Выставьте больше дней и живите спокойно — любые ваши изменения будут сохранены.
И если вам понадобится вернуться к своему какому-то решению, вы можете просмотреть и вернуть его через диалог
Но обращаю ваше внимание, что в диалоге настроек указаны чекбоксы действий, которые автоматически ставят метки. Метки — это чекпойнты сохранения, если кому так понятнее :) А можно эти метки создавать самому. На скрине видно много автоматических меток, которые создались при открытии IDEA-Project-а, и одна метка, которую я создал руками. Нам, верстальщикам, стоит помнить, что автоматическая метка ставится только при открытии проекта. Остальное из списка чекбоксов работает только в Java-проектах.
Я нередко использую именно ручное создание меток в локальной истории. Так бывает, что вот уже почти сверстал какой-то блок, но уперся в трудноисправимые баги. И тут в голову приходит идея как сверстать по-другому. Что делать, чтобы не потерять уже сверстанное? Сделать копию верстки и стилей и сохранить под другими именами? Или создать ветку в репозитории и там временно похранить? Можно, конечно, но неэлегантно. И лениво.
Элегантно — сохранить верстку в Локальной Истории, поставив метку с внятным комментарием.
Сохранить можно состояние как одного файла, так и целиком Проекта, то есть и HTML-верстку и CSS-файлы и картинки и скрипты.
После этого можно пробовать реализовать второе решение, и если оно окажется хуже первого, парой кликов можно вернуться к сохраненному состоянию Проекта из Локальной Истории. Удобно же, как этим можно не пользоваться?
Diff
Функциональность сравнивания "чего-то" с "чем-то" в Идее есть по умолчанию.
Заканчивая тему SVC, приведу скриншот diff локального файла с этим же файлом в репозитории
А вообще существует три режима diff-а
- Compare Two Files — сравниаются два файла, выделенные одновременно в Project View
- Compare File with Editor — сравнивается выделенный в Project View файл с файлом, который открыт в Editor View
- Compare Selected with Clipboard — сравнивается выделенный фрагмент кода с тем, что лежит в буфере обмена
В каждом из них мы перемещаемся в окно diff-а, аналогичное тому, что на скриншоте выше. И в каждом есть активные кнопки для переноса изменений из одного файла в другой.
Создание элементов кода
Работая в IntelliJIDEA, есть возможность не думать о написании HTML-тегов и CSS-свойств. И я сейчас не о том волшебно-контекстном автокомплите, о котором я уже писал выше. Я говорю о легкой возможности мыслить не "HTML-тегами" и "CSS-свойствами", а иными категориями, например, "Раскладка страницы" или "Межпроектный HTML-CSS Компонент". То есть как это?
Я уже упоминал, что Live Templates — это некие сокращения для ввода более полной версии текста — набрали div, нажали кнопку Tab и вместо введеных трех символов получили узел <div></div> в дереве элементов.
Такие сокращения можно сделать на все известные теги. Огромную работу в этом направлении проделал Вадим Макеев для редактора TextMate. И это значительно ускоряет набор кода. Но внутри IntelliJIDEA мы эту фичу используем не только так, а ещё и по-иному.
В группе HTML-верстки мы следуем Некой Идеологии, которая служит тому, чтобы достигать максимальной надежности и максимальной поддерживаемости кода. И как инструмент этой Иделогии развивается Фреймворк, о котором на Я.Субботнике рассказывал Виталя.
Что это дает? Вместо того, чтобы каждый раз писать анонимные теги, указывать им атрибуты класс и терять на этом время, потому что делаем мы это сотни раз в день, мы используем Live Template, который, к примеру, создает готовую верстку общепортального элемента "Юзерпик"
LT b-userpic превратится во фрагмент дерева
<!-- b-userpic -->
<i class="b-userpic">
<img src="" alt=""/>
<b></b>
</i>
К слову, элемент b-userpic — часть Яндекс.Фреймворка. В этом компоненте решена проблема выравнивания юзерпика в неком плейсхолдере (25х25 или 50х50 или 100х100) по вертикали и горизонтали, когда размеры самой картинки не известны. Спасибо Юре Артюху за идею и Витале Харисову за то, что её раскопал в архивах cssing.org.ua и добавил в код элегантности :)
Или вот еще примеры Live Templates, которые ускоряют создание CSS-кода (в комментариях я пишу LT, справа от комментария — код, который разворачивается вместо LT):
At-символ — шоткат для быстрого создания импорта. Внутри скобок работает автокомплит имен файлов Проекта
/* @ */ @import url(…);
На каждое CSS-свойство написан свой LT, который раскрывается в полную запись.
/* poa */ position: absolute;
/* por */ position: relative;
Если CSS-свойство составное, то в нужных нам местах Идея предложит ввести нужные значения
/* bau */ background: [color]url(…) no-repeat[position]
По аналогии с HTML, использовать LT можно и для вывода узкоспециализированых значений. В Яндексе используется два шрифта в строго указанных размерах. Я об этом не думаю вообще, потому что есть такие LT:
/* fa */ font: 100% Arial, sans-serif;
/* fv */ font: 80% Verdana, sans-serif;
Очень облегчают работу LT, которые позволяют создавать кроссбраузерные решения. Например до тех пор, пока не уйдет на покой Firefox 2, для создания инлайн-блока мы будем использовать LT dib.
/* db */ display: block;
/* di */ display: inline;
/* dib */ display: -moz-inline-block; display: inline-block;
Ну и эти два LT, как иллюстрация к кроссбраузерным решениям. Что они делают, я уверен, понятно.
/* bsb */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box
/* bsc */ box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box
Что нужно понять из этих примеров? То, что мы пишем код фрагментами, а не HTML-тегами/CSS-свойствами. То, что максимально используя ливтеплейты, мы переносим задачу по формированию логических кусков нашего кода на плечи робота. А себе оставляем только творчество :)
Но творчество не в смысле: «Я художник — я так вижу». Нет :) Творчество в смысле сверстать так хорошо, чтобы сделать верстку максимально надежной, легко поддерживаемой и добиться соответствия эскизу.
Code Inspection
Вот та фича, из-за которой я не покину IntelliJIDEA. В чем ее бенефит? Чтобы её оценить, вам придется кое-что сделать в Idea.
- Создайте два новых пустых файла и скопируйте в них соответствующий доктайп: В HTML-файл
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
В XHTML-файл
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- В оба файла скопируйте каркасную структуру
<html>
<head>
<title>Презентация</title>
</head>
<body>
<ul>
<li>
item
</li>
</ul>
</body>
</html>
- Теперь как бы невзначай удалите закрывающем теге li первую скобку. В обоих файлах, чтобы получилось так:
<li>
item
/li>
А теперь смотрим, что в XHTML-файле, в отличие от HTML, справа на полях появился блок красного цвета. Это включились в работу Инспекторы кода, которые сообщают нам об ошибке в коде.
Веллформность
Вообще-то, этот пример с пропущенным закрытым тегом банален. Ну, в самом-то деле, редактор распарсил xml документ и обнаружил, что дерево узлов сломано. То есть not well-formed — неправильно оформлено, по-русски. Проверка на веллформность — это полезная фича, но ничего сногсшибательного, — много говорить о ней нечего. А тот факт, что я узнал о ней сразу, как только ошибся в коде — об этом говорить уже можно с восторгом, потому что IntelliJIDEA ответила на незаданный мной вопрос: "А не слажал ли я случайно?". "Да, слажал", — ответила мне Идея радостно и стрельнула в глаз красным. "Ой!", — сказал я, и тут же (сразу же!) исправил ошибку.
Валидность
Но тем не менее, инспекция веллформности впечатляет меня меньше, чем валидация кода на лету. Прошу вас осознать этот факт — за валидностью своего кода я не слежу вообще, потому что эту часть на себя тоже забрала Идея.
Помните, когда я говорил про контекстный автокомплит, я показывал скриншот из которого понятно, что внутри <p> по спецификации не может быть блочного элемента.
Но что будет, если я все таки напишу внутри параграфа блочный элемент?
Я увижу в правом верхнем углу документа красный индикатор. То есть в документе есть ошибки. А еще Идея мне подсветит красным невалидный код, и при наведении на него расскажет, в чем конкретно ошибка. А ещё покажет ошибку справа на полях (для быстрого перехода к ней по клику).
То есть, когда вы совершаете ошибку, и документ становится невеллформным или невалидным, вы узнаете об этом сразу же, а не после того, как откроете документ в Firefoxe (с плагином HTML Validator) и не после того, как документ уйдет в тестирование и вам напишут багрепорт об ошибке валидации. Осознайте этот бенефит для своей эффективности.
На мой взляд, IntelliJIDEA — единственный редактор, который так элегантно, ненавязчиво и эффективно позволяет а) не допускать ошибки валидации и б) исправлять их очень быстро.
Кириллица в CSS-селекторах
Завершая тему Инспекторов Кода. Если существовал такой человек, который продумал расположение символов двух языков на одной кнопке (рус/англ), то этот человек был с оригинальным чувством юмора. Например, он подложил свинью разработчикам, когда на одной кнопке расположил латинскую «C» и кириллическую «С». Предполагаю, что он злорадно потирал ладошки и ехидно хихикал, когда представлял себе, как разработчики будут чертыхаться и силиться понять, почему CSS-селектор, в котором всё написано правильно, не применяется к элементу. А проблема лишь в том, что в английском слове попалась кириллическая «С».
Может быть вы считаете, что этот юзкейз притянут за уши? Ну-ну ;) Если Идеей не пользуетесь, тогда просто запомните этот смешной юзкейз на будущее, очень может быть, он сэкономит вам много времени ;)
Но работая в Идее, об этом можно не думать — она явным образом указывает на то, что в коде появился кириллический символ в неположенном месте.
Quirks Mode Plugin
Quirks Mode Plugin идет в поставке и он на лету проверят HTML/XHTML код на кроссбраузерность. Насколько я понимаю, разработчики плагина взяли данные с сайта Питера-Пол Коха http://www.quirksmode.org/
Ума не приложу, как можно было реализовать проверку моего кода на кроссбраузерность по тесткейсам Питера. Но ребята из JetBrains смогли. Функциональность востребованная.
Удобная работа с текстом
Вообще-то удовольствия в работе верстальщика маловато, потому что, как я уже говорил, приходится писать один и тот же набор HTML-тегов и CSS-свойств каждый день по-многу раз в день. И если Live Templates нам помогли ускорить создание элементов кода, то всё равно есть такие действия, на которые макросов не напишешь.
Это какие? Насколько часто вам приходится фрагменты кода выделять, копировать, вырезать, вставлять, перемещать в документе, искать по документу, заменять и рефакторить? Мне очень часто. И до знакомства с таким понятием, как IDE, я не знал, что работа с текстовыми строками может приносить удовольствие, а не утомление.
Я сейчас покажу часть шоткатов, которые наряду с привычными (типа Cmd V - вставить из буфера) упрощают рутинные действия и ускоряют работу.
Cmd C
Скопировать в буфер строку под курсором. Выделять строку не нужно
Cmd X
Вырезать в буфер строку под курсором. Выделять строку не нужно
Cmd Y
Удалить строку под курсором. Выделять строку не нужно
Cmd D
Дублировать строку под курсором. Выделять строку не нужно
Cmd Shift ArrowUp
Переместить строку под курсором на одну вверх. Выделять строку не нужно
Cmd Shift ArrowDown
Переместить строку под курсором на одну вниз. Выделять строку не нужно
Cmd L
Выделить строку под курсором
Ctrl W
Выделить слово под курсором. Повторное нажатие расширяет выделение до логического родителя — предложение в текстовом блоке или тег родительского элемента в дереве. Используется Ctrl, потому что Cmd занят (см. ниже)
Selection -> Cmd D
Выделить подстроку или строки и дублировать выделенное
Cmd /
Закомментировать строку под курсором строчным комментарием
Selection -> Cmd /
Выделить фрагмент и закомментировать выделенное строчными комментариями. Фрагмент может быть многострочным или частью строки
Selection -> Cmd Shift /
Выделить фрагмент и закомментировать выделенное блочным комментарием. Фрагмент может быть многострочным или частью строки
Alt Fn Backspace
Удалить всё до начала следующего слова. Как вариант использования, стать в конце строки и по вызову хоткея удалить все пробельные символы до начала следующей строки. Но есть более правильный.
Cmd Shift J
Нативный способ склеить последующую строку со строкой под курсором. Не нужно становиться в конец строки
Shift Cmd Fn Backspace
Удалить открывающий и закрывающий тег, не трогая его содержимое. Нужно стать курсором на удаляемый тег
Cmd Plus/Minus
Фолдинг элемента под курсором. Стоять курсором на элементе не нужно — достаточно стать на строку с элементом
Shift Cmd Plus/Minus
Фолдинг всего дерева в документе. Стоять курсором всё равно где ;)
Fn Cmd ArrowLeft/Right
Переместить курсор в начало/в конец файла.
Fn Cmd ArrowUp/Down
Переместить курсор в начало/в конец видимой частиэкрана. Это не листание по-странично, а именно одноразовое перемещение курсора вверх/вниз.
Cmd J
Контекстное меню для выбора Live Template. Для точного выбора (по первой букве) достаточно ввести в коде первую букву темплейта и нажать хоткей
Selection -> Alt Cmd J
Контекстное меню для выбора Surround Live Template.
Shift Cmd M
Многострочный Replace.
Shift Cmd N
Быстрое открытие файла.
Shift F6
CSS Refactoring
Cmd W
Закрыть активный таб. Ничего необычного. Просто в хоткее Ctrl W я сюда сослался :)
Если вы не пользователь Mac OS, то читать их нужно так: Cmd соотвествует Ctrl, сочетание Fn Backspace соотвествует Delete
Не могу сказать, что в других IDE похожих хоткеев нет. Есть конечно. Но операций с целыми строками без предварительного выделения строки я до IntelliJIDEA нигде не встречал. А сейчас я не представляю себе эффективную работу без них.
Навигация
Вот, кстати, в списке шоткатов промелькнул неприметный и, наверное, непонятный Shift Cmd N. А ведь я нажимаю этот хоткей раз 100 в день. Он рождает мне маленький диаложек, который ожидает от меня ввода имени файла.
И знаете, какой у меня usecase сотня раз на дню? Мне нужно открыть файл на редактирование, но имени его я "...не помню. Помню только... первые три буквы" (с) М.Галустян.
И что мне делать? Искать нужный файл глазами в немаленькой файловой структуре Проекта? Это же так долго и утомительно. Тем более, если не помнишь точно, как он называется, и, соответственно, в какой конкретно папке его искать. А этот диаложек подсказывает нужные мне файлы по маске
А если надо ограничить поиск по типам файлов, то есть фильтр
А у Java-программистов есть еще поиск по символу и по имени класса (мечтательно вознеся глаза к небу).
Я хотел бы, чтобы вы меня поняли — навигироваться по Проекту можно не открывая Project Panel. Как найти любой файл я рассказал. А еще можно переходить к любому ресурсу прямо из кода.
Например, Cmd Click на имени CSS-селектора в HTML-коде провалит меня в файл с этим селектором. Если селектор написан не в одном файле, то будет предложен выбор.
Правда, хотелось бы в этом попапе видеть пути к файлам вместо имени Idea-Module. Мне это только что в голову пришло, надо зарепортить импрувмент в JetBrains.
Тот же принцип с файлами скриптов и картинок — Cmd Click по пути к ресурсу прокидывает в него.
Кстати, я говорил, что картинки можно просматривать к IntelliJIDEA? Размер посмотреть, объем, битность. А большего в IDE и не нужно, на мой взгляд.
Рефакторинг CSS
Еще в списке шоткатов промелькнул Shift F6. Как им пользоваться и что он делает? Если стать на имени CSS-класса в CSS-селекторе и нажать хоткей, то появится такой диалог
Если в нем изменить имя CSS-селектора, то он изменится во всех файлах Проекта. Разработчики IntelliJIDEA вот так говорят об этой функциональности:
This important feature is a real time-saver which additionally guarantees the consistency of the refactored code.
Я, вообще-то, люблю делать ежедневный рефакторинг. А эта фича в рефакторинге незаменима — быстрый результат и гарантированное качество. Проверено на себе. Рекомендую.
Калейдоскоп возможностей
А теперь коротенько о разнообразных IDEA-вкусностях словами самих JetBrains-овцев и будем заканчивать.
Размер картинок
Работая в IntelliJIDEA, вам не нужно думать о реальных размерах контентных картинок. Вам сообщат :)
Инспекция HTML-атрибутов
Работая в IntelliJIDEA, у вас не получится написать один и тот же атрибут дважды. Вам сообщат :)
Инспекция CSS-свойств и селекторов
Работая в IntelliJIDEA, у вас не получится ошибиться в написании CSS-свойств, их значений и, например, псевдоклассов
А еще у вас всегда под рукой будут vendor-specific CSS-свойства, и инспекция ошибок в их написании:
И небольшой импрувмент — на поле слева от CSS-свойства можно видеть цветной квадратик. Для наглядности
А если надо быстро цвет заменить во всем проекте, то знакомый вам Shift F6 поможет это сделать быстро и гарантированно без ошибок. Без ошибок еще и потому, что ввести в поле вы можете только символы #, 1-9, a-f или зарезервированные слова
Show Applied Styles for Tag
Не выходя из IntelliJIDEA, вы всегда сможете увидеть CSS-стили, которые применяются к нужному вам HTML-элементу
CSS Autocomplete
Помните, я говорил, что IntelliJIDEA в XML-е подсказывает имена использованных элементов? Ну так вот, в CSS вы имеете то же самое — вам подскажут имена существующих CSS-классов
Хлебные крошки в HTML/XHTML
Работая в IntelliJIDEA, вы не заблудитесь в чужом неряшливом коде. Вас выведут по хлебным крошкам
Navigation Bar
Работая в IntelliJIDEA, вы всегда можете получить доступ к нужному вам файлу, не открывая Project Panel. Вам поможет плавающая панели навигации Fn Alt ArrowLeft
Javascript debugger
В своей работе я не пишу такие скрипты, которые требуют дебага, потому что у меня такая специализация, что production-скрипты пишу не я, а другие крутые парни. Поэтому про дебаг я не могу ничего от себя рассказать. Но то, что он есть, и судя по видео, он удобен, я вам сказать могу :) Приглашаю вас посмотреть online-demo на сайте JetBrains.
А еще обязательно загляните на страничку с описанием поддержки Javascript. Там вам будет чему порадоваться :)
Взаимодействие с Eclipse
You can export, import and synchronize IntelliJ IDEA projects with Eclipse, enabling all of your team members to take advantage of using their favorite IDE. Plus, IntelliJ IDEA supports Eclipse format of storing dependencies, letting you share the single code base within mixed-IDE team.
Познакомиться с этой функциональностью можно здесь
Единые настройки для команды
В версии 8.1 появилась возможность хранить все свои настройки IntelliJIDEA на IDEA Sharing Server. Сейчас туда можно только логиниться под своим аккаунтом. Но скоро настройки среды можно будет шарить в команде и между командами.
В группе HTML-верстки Яндекса используются свои настройки, которыми поделиться с вами мы пока не можем, потому что... ну кривоватый способ мы выбрали (подкладывание файликов IDEA-настроек с помощью shell-скрипта). Алексей Ефимов согласился помочь написать плагин, который будет устанавливать наши настройки нативным образом. Когда Алексей его напишет, и если до того момента IDEA Sharing Server не запустится, я выложу ссылку на плагин.
И вот на этом я, пожалуй, остановлюсь :)
Резюме
Если вы таки дочитали до этих строк, то у вас однозначно есть две отличных черты характера — усидчивость и желание учиться новому. И я рад, что в мой блог заглянул именно такой читатель, как вы. :)
В этой статье я старался показать как именно работа в IntelliJIDEA повышает мою эффективность. И намекнуть вам, что ваша эффективность тоже может стать выше.
Мне хочется, чтобы после прочтения статьи стала понятна одна вещь: у меня не было цели доказать, что IDEA превосходит все существующие редакторы. Ставить такую цель бесполезно и слишком самонадеянно. Глупо и по-детски :) Я лишь хотел показать известные мне бенефиты Идеи, которые лично для меня определяют выбор именно этого редактора. Станет ли вам удобно в Идее — круто, буду рад. Но если описанные возможности Идеи (в целом) вас не впечатлили — я, в-общем то, не расстроюсь.
Единственное, что меня может опечалить — это комменты в духе "каких-то особых фич, которые дают преимущество этой IDE перед остальными, я не увидел. Статья — всего лишь акт поклонения любимому софту." Наличие таких комментариев для меня будет означать, что их авторы не поняли цели моего мессаджа, и это целиком моя вина — не смог донести свой смысл.
Я искренне надеюсь, что описанные мной знания смогут Вам помочь верстать быстрее, эффективнее и качественнее. Успехов Вам!