Предыстория
Внимание!
Если вы не любите долгие рассуждения, то переходите к следующей части статьи. Тут я разглагольствую о том, как могут развиваться события в жизни.
Ты когда-нибудь замечал, как быстро летит время? Когда ты был ребёнком, и даже школьником, (11 класс не в счёт, так как там уже начинаешь свыкаться с мыслью, что всё идёт к тому, что скоро всё начнётся по новой) вряд ли думал о времени, о том, как это время можно провести с пользой и других подобных вещах. Следующей ступенью становления личности как профессионала, в какой-то мере и какой-то области, является студенческая пора. Во время обучения в высшем учебном заведении ты уже начинаешь понимать, что время — это ресурс, причем невоспроизводимый. Время нельзя вернуть, повернуть вспять и тратить его на какие-то мелочи, которых можно избежать.
Если попытаться спроецировать этот поток мыслей на нашу с вами область, то получается, что все в самом начале пути не думают о том, что какие-то вещи можно делать намного, намного быстрее! По мере того, как ты развиваешься в какой-то области и твои мысли, действия, умения набирают определённый уровень — волей-неволей задумываешься о потраченном времени.
Попытайся вспомнить то, как ты первый раз запустил блокнот и написал свои первые строки кода, дальше пошло развитие, взлёты и неудачи. Потом ты узнал про, допустим, Dreamweaver, использовал его как основной инструмент. Когда ты достиг понимания того, что ты делаешь — ты осознал, что заложенный в этот визуальный редактор функционал тебе почти и не нужен. Вот теперь ты узнаешь о Sublime Text, который манит тебя элегантной темой, огромным количеством плагинов, высокой скоростью работы, отзывчивости. Основная идея редактора в том, что он, по сути своей, является обычным редактором текста, а за счёт плагинов ты можешь воссоздать тот же самый Dreamweaver, но с тем функционалом, что нужен лишь тебе. И это твоя первая победа.
Однако, самый драгоценный ресурс для человека идёт, и рано или поздно ты начинаешь задумываться о том, что тебе не хватает. Допустим, ты начинаешь пользоваться Bower, Grunt или Gulp ввиду того, что эти инструменты экономят твой самый важный ресурс. И в этом случае наступает такой момент, что твой любимый редактор не может полностью покрыть твои новые требования к нему. Вернее может, но ценой своей простоты.
После установки ещё десятка различных плагинов твой любимый редактор уже обретает черты монстра. Он стал уже настолько мощным, что может потягаться с некоторыми IDE и, даже не напрягаясь, затмить функционалом другие схожие редакторы. Всё идёт классно, как по маслу.
Проходит некоторое время, и ты начинаешь интересоваться ещё большим количеством инструментов. Некоторыми из них ты начинаешь пользоваться, за другими начинаешь следить и даже участвовать в их развитии. А время всё идёт и идёт.
И вот наконец кульминация — ты понимаешь, что нужно оптимизировать свою работу в большей степени. Стартует новый этап твоей жизни — поиск лучшего инструмента для работы. Нет, конечно же, твой любимый навороченный редактор отлично справляется со своей работой, как и раньше, безукоризненно, но вот сам ты понимаешь, что в некоторых местах он не сильно-то и хорош.
Например, ты начинаешь замечать, что он не так хорошо работает с автодополнением свойств, подсказки его не так хороши, а ещё не хватает автоматической проверки кода на валидность или какие-то личные правила. Первым делом ты отправляешься на поиски плагинов, которые могут помочь тебе справиться с этими недостатками, то есть устранить их. Ты установил ещё десяток плагинов (образно), но лучше от этого не стало. Автодополнение до сих пор работает странно.
Начинается самый сок — поиск того, как можно улучшить своё текущее положение дел. Да, тебе тяжело, потому что твой любимый редактор, которому ты был верен всё это время, начинает своеобразно шутить над тобой. Тяжело, но придётся рискнуть — поставить на кон время и победить.
Ты пребываешь в поисках уже около недели, попутно работая над проектами в том же самом редакторе. В свободное время ты пытаешься использовать найденные инструменты, тем самым определяя их возможности и удобства для себя лично.
Тут ты вспоминаешь, что пару лет назад ты слышал об IDE, которая может всё то, что ты надстраивал над своим любимым редактором кода. Всё то, что нужно тебе и намного больше. Конечно же, ты скептически к этому отнесешься, ведь всё это время ты работал в любимом редакторе и ни о чем не жалел. Разумеется, ты вспомнишь о всех минусах IDE, о их громоздкости и огромном количестве лишнего функционала. Но ты не можешь не попробовать снова — возможно, это твоя последняя надежда.
Автодополнение кода работает, проверка кода ещё лучше, чем та, что я делал с помощью плагинов. Ох, даже проверка на существование переменных в Less организована. Ух, нифига себе, тут даже есть автоматических поиск примесей в файлах и выведение их параметров при использовании. И это лишь малая часть того, что тебя изумляет на этот момент. Начинаешь задаваться вопросами: Ох, где же эта IDE была раньше? Почему я её не использовал всё это время?
На этом твои поиски заканчиваются. Ты счастлив, ведь твой новый инструмент куда лучше прежнего.
Просьба не разводить споров между сторонниками различных IDE и редакторов типа Sublime Text (далее ST3), Brackets, Atom и т.д. Ведь я точно знаю, что защищать то, чем пользуешься, ты будешь до последнего. Или, пока не найдешь что-то интереснее.
WebStorm
Моим новым редактором кода стала IDE WebStorm от компании JetBrains, которая отлично знает как заманить на свою темную сторону новых пользователей.
Наверное, некоторые из вас задались вопросом — «почему именно она?». Я постараюсь как можно подробнее ответить на этот вопрос ниже.
Почему WebStorm?
Мне хотелось иметь такой инструмент, который был бы изначально полностью заточен на веб-разработке. Так уж сложилось, что помимо WebStorm существует некоторое количество других IDE, которые были отброшены из-за различных ситуаций, которые лично для меня - недостатки. Я намеренно не буду перечислять их, так как среди моих читателей могут найтись сторонники тех или иных редакторов или IDE, которые затаят на меня обиду (если ещё не сделали этого) или начнут рассказывать о том, как исправить эти недостатки. Поэтому не обессудьте и поверьте, что лично для меня WebStorm победил по всем фронтам.
Чем же так он тебе понравился?
Автодополнение
Наконец-то я получил нормальное автодополнение, причем не только HTML, CSS (Less), но и JavaScript. Они были и в ST3, но там были проблемы в том, что переменные он не предлагал. Для того, чтобы это исправить, нужно было ставить плагин, однако, он работал по сочетанию клавиш, а не автоматически.
Кстати, с автодополнением JS у ST3 какие-то конфликты. Ну никак не предлагались мне переменные для подстановки. Вернее сказать, они предлагались, но когда уже было написано где-то 80% названия переменной. Тут же всё замечательно работает с первой же буквы.
А ещё я получил автодополнение переменных в зависимости от контекста. То есть, если я работаю с примесью, то переменные мне будут предлагаться, в первую очередь, из её аргументов. Это сверхкруто и удобно.
Помимо этого, автодополнение отлично работает с классами и примесями. Это ещё один плюс в копилку, так как примесей в проекте может быть куда больше, чем 10, 20, 50 и даже 100 штук. А ещё на скриншоте видно, что прямо в этом же окошке отображаются ожидаемые аргументы для примеси.
Почему я так много времени уделяю плюсам, связанным с автодополнением? — Это дико экономит время, если проект уже перерос ту психологическую отметку, когда вы помните все названия переменных, примесей и классов для расширения (&:extend(...)).
Разумеется, можно и не запоминать названия переменных, если применять какую-то логику их названий, то есть конструировать переменные, в зависимости от предполагаемого контекста их использования. Например, если это переменная, необходимая для всего проекта, то следует конструировать её название следующим образом:
@base-font-size: 14px; @base-body-color: #333; @base-body-background: #fff;
Не буду распинаться по этому поводу дальше, так как я планирую написать на эту тему отдельную статью, в которой будет рассказано, как называть переменные в Less так, чтобы не нужно было их запоминать.
Проверка на ошибки и отладка кода
Теперь можно писать Less код даже без компиляции в CSS, ведь все ошибки будут видны сразу же, в удобной форме и на этом же месте. К сожалению, Prepros иногда творит чудеса и не явно указывает на ошибки при компиляции Less в CSS, и вместо того, чтобы указать строку, где существует проблема, он просто кидает мне название переменной. Приходилось пользоваться поиском или компилировать после каждого класса, чтобы экономить время на поиске места опечатки.
Разумеется, можно использовать Grunt или Gulp и им подобные. В этом случае, этот плюс вам не знаком, так как эти системы сборки (вернее их плагины) отлично справляются с указанием ошибки и её дислокации в проекте.
Ещё одним плюсом будет отличная система отладки и тестирования кода, о которой написано на официальном сайте производителя.
Структурирование
Отдельно хочу отметить фишку со структурами файлов. Это очень помогает, когда знаешь название искомого селектора или класса, но не помнишь, где же он у тебя в файле прячется. Причем, это работает со всеми файлами (как минимум HTML, CSS (Less и т.д.) и JavaScript), что я успел проверить.
Шаблоны
Если вы имеете какой-то внутренний стандарт по оформлению шапок у файлов, то в WebStorm есть шаблоны создания файлов. К сожалению, они слегка не логичны при вызове, хотя это сугубо моё личное мнение. Я минут пять искал, где же шаблон Less файла, который я отредактировал, а тут бац, и он лежит в stylesheet. Хотя, можно, наверное, было догадаться :)
А ещё отсутствует поиск по шаблонам при создании через окно проекта, хотя он присутствует, если создавать файл через меню file > New. Интересненькие дела, однако :)
Система задач
Интересной функцией будет листинг задач в проекте. Довольно-таки удобно для больших проектов, когда есть какие-то спорные моменты в коде или их нужно дописать (исправить) в будущем.
К слову, вы тоже заметили, что у jQuery из репозитория есть TODO? — теперь я понимаю почему он так много весит :)
Мне этого хватило, чтобы сделать свой выбор в сторону этого продукта.
Какие сложности возникли при переходе?
Есть маленькая проблема, которая свойственна всем IDE — они тормозят. Жутко тормозят. В случае с WebStorm такая проблема также имеется, но её можно немного подавить
Для того, чтобы хоть как-то избавиться от медлительности, стоит начать использовать 64-битную версию и слегка пошаманить с настройками виртуальной среды в WebStorm64.exe.vmoptions или WebStorm.exe.vmoptions. Параметры там сугубо личностного характера и зависят от конфигурации вашего компьютера. Если вы хоть раз настраивали сервер Minecraft, то для вас это будет совсем просто, иначе воспользуйтесь этой ссылкой.
Приведу пример с открытым файлом библиотеки jQuery. Конечно, пришлось подождать около пяти секунд, но это мелочи.
Если вы ещё не догадались, то WebStorm написан на Java. Однако, никаких сильно прожорливых ситуаций я ещё не встречал. При работе с сравнительно большими Less (они у меня жестко разбиты) и небольшими JS файлами, я получил максимум 80Мб. Вполне приемлемый результат — меня всё устраивает.
Выводы
Увы, перечислять и расписывать все плюсы для меня бессмысленно — нужно пробовать самому. Ведь для каждого минусы и плюсы будут различными, то есть личными. Кому-то нравится одно, другому ещё что-то и так до бесконечности.
Достоинства
- Нормальная система автокомплита
- Отличная подсветка кода
- Отличная система подсказок (аргументы примесей, поддерживаемые браузеры и т.д.)
- Хорошо работающая проверка кода (существование переменных, ошибки и т.д.)
- Поддержка всего и сразу
- Простая отладка и тестирование кода
- Структура файла (показываются все классы в краткой форме)
- Гибкость настроек
- Плагины (не могу без сортировки свойств)
- Гибкая система скидок
- Активная разработка и поддержка
Недостатки
- Слегка тормозит
- Немного запутанные настройки (после ST это ад какой-то)
- Неочевидное для меня использование шаблонов файлов и отсутствие поиска по ним при создании
- Получение скидки студентам (ниже подробнее)
Ах, да, для всех продуктов этой компании есть 30-ти дневный пробный период с полным функционалом.
Для студентов есть 100% скидка. Как только приедет моя карточка ISIC, или я получу почту в домене своего университета, сразу же попытаюсь получить лицензионный ключ. К сожалению, получить почту в домене тяжко, а вот если бы студенческий можно было сфотографировать, как у DreamSpark, то было бы здорово. Но ситуацию с фотками студаков они описали в своей статье на Хабре.
Обновление от 4.10.2015
Не знаю точной даты добавления возможности, но теперь лицензию можно получить по скану студенческого билета, используя для этого специальную форму.
Кстати, так обидно, что ISIC теперь 600 рублей вместо 400, как было раньше (до 1 февраля) — как только я созрел для покупки, так сразу же они решили поднять цены :)
Всем спасибо за внимание, хорошего кода и отменных инструментов вам!