Готовим Sublime Text 2 для front-end

Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, как я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 ^[1] — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript. Небольшой дисклеймер: я работаю на Mac OS X, поэтому в каких-то «кроссплатформенных моментах» могу что-нибудь не договорить, но постараюсь представить полную информацию. И еще: на истину в последней инстанции не претендую и жду ваши варианты.

Чтобы лучше понимать, где и о чем пойдет речь, представлю сначала структуру статьи:
Введение
Описание основных моментов, необходимые ссылки и т. п.
Плагины

• Основные плагины — в этом разделе речь пойдет о том, что, на мой взгляд, должно быть установлено в большинстве случаев, в общем must have.
• Дополнительные плагины — просто полезные расширения; здесь я представлю то, что понравилось мне, но этот список в каждом конкретном случае может специализироваться под ваши задачи и предпочтения, поэтому смотрите на аналоги, ищите новое, в общем кастомизируйте.

Live reload и поддержка CSS-препроцессоров
Почему две такие разные вещи я объединил в один раздел? Всё из-за специфики некоторого софта, о котором я расскажу позже. Live reload (или live preview), если вдруг кто-то не знает, это просмотр в браузере того, что вы сделали в редакторе, без необходимости обновления страницы, т. е. автоматически. Под поддержкой CSS-препроцессоров я подразумеваю добавление в Sublime Text 2 поддержки синтаксиса SASS/SCSS, LESS, Stylus или чего бы то ни было еще из того, что вы предпочитаете использовать, а также организация автоматической компиляции всего этого добра (build/watch system). На самом деле, всё это объединено в один раздел не только из-за описанной выше причины, но еще и потому, что моей (думаю, вашей тоже) целью было сделать так, чтобы можно было изменить что-то, например, в scss-файле, сохранить его и тут же посмотреть результат в браузере, т. е. автоматизировать процесс компиляции и обновления страницы. А значит мы имеем цепочку «сохранить файл» > «скомпилировать» > «обновить», что вполне логично укладывает всё это в один раздел статьи.

Введение

Для того чтобы комфортно устанавливать, удалять и обновлять плагины используется Sublime Package Control ^[2], его установка очень проста и описана на этой странице ^[3]. Практически все плагины, которые могут вам понадобиться, есть в Package Control, поэтому их удобно искать здесь ^[4]. Я не советую игнорировать этот плагин и ставить что-то вручную, разве что у вас будет на это особенная причина. Можно сказать, что Package Control сейчас стандарт де-факто для Sublime Text 2.

Все представленные плагины размещаются на GitHub, практически у всех есть readme, которое лучше читать. Описывать все тонкости здесь не имеет смысла, ведь всё меняется, поэтому в этой статье я буду давать небольшое описание, а подробности прекрасно описывают сами авторы плагинов.

Плагины

Основные плагины

ZenCoding ^[5]
ZenCoding вряд ли нуждается в комментариях, не так ли? Начатый в 2008 году pepelsbey ^[6], этот  «ускоритель написания кода» сэкономил страшное количество времени разработчиков. С тех пор реализован в виде плагинов для многих редакторов и IDE.

SublimeLinter ^[7]
Этот плагин добавляет поддержку lint для многих языков, в том числе HTML, CSS и JavaScript. Для лучшей работы установите node.js ^[8], подробнее об этом читайте в readme ^[9] на GitHub. Вообще, это один из плагинов, readme к которым лучше читать полностью.

SublimeCodeIntel ^[10]
Приближает возможности Sublime Text 2 к возможностям IDE, добавляя «code intelligence» и «умный autocomplete», в частности добавляет возможность быстрого перехода к объявлению, autocomplete для import'ов и отображение информации о функции в статусной строке.

Alignment ^[11]
Этот плагин от автора Sublime Package Control делает простым выравнивание многострочных и множественных выделенных участков кода.

CSSComb ^[12]
О CSSComb подробно можно прочитать на хабре ^[13]. Этот полезный инструмент причешет ваш CSS, расположив свойства в заданном порядке и разбив их на группы.

HTML5 ^[14] и jQuery ^[15]
Это наборы сниппетов тегов HTML5 и методов jQuery, полный список которых можно посмотреть в Tools > Snippets.

JsFormat ^[16]
Плагин для форматирования JS/JSON-кода, использующий сервис jsbeautifier.org ^[17] и имеющий довольно гибкие настройки. Форматирует выделенный участок кода или весь файл, если выделения нет. Проверку на то, есть ли у файла расширение *.js, не осуществляет, так что использовать нужно с осторожностью.

Minifier ^[18]
Minifier умеет минифицировать JavaScript (Google Closure Compiler ^[19] или UglifyJS ^[20]) и CSS (Reducisaurus ^[21]). Весь плагин заключается в двух комбинациях клавиш, одна сохраняет результат в текущем файле, а вторая в отдельном с именем name.min.ext.

Prefixr ^[22]
Однозначный must have для тех, кто не пользуется препроцессорами, да и всем остальным тоже пригодится. Добавляет там, где нужно, вендорные префиксы (и даже в правильном порядке) с помощью сервиса prefixr.com ^[23]. Работает просто — пишете свойство без префиксов, нажимаете комбинацию клавиш и готово.

SideBarEnhancement ^[24]
Как понятно из названия, добавляет некоторые полезные улучшения в сайдбар, например, пункт контекстного меню сайдбара «Open with...», позволяющий открыть файл в сторонней программе.

Дополнительные плагины

Clipboard History ^[25]
Возможно, этот функционал лучше иметь во всей ОС, но мне хватает его в редакторе. Плагин запоминает историю буфера обмена, благодаря чему вы можете вставить не только последний скопированный фрагмент, но и любой из предыдущих.

EncodingHelper ^[26]
Помимо прочего, отобржает кодировку открытого файла в строке статуса. В общем-то это единственная причина, по которой я установил этот плагин, но у него есть и другие возможности, например, он умеет предупреждать о том, что файл, открытый в неправильной кодировке, может быть поврежден.

Placeholders ^[27]
Часто ли вам приходится вставлять в код рыбы? Всем любителям lorem ipsum этот набор сниппетов однозначно пригодится. Кроме простого текста, умеет вставлять параграфы, списки, картинки и т. д.

Theme — Soda ^[28]
Это моя субъективная рекомендация обладателям Mac OS X. Тема Soda оформляет интерфейс Sublime Text 2 в нативном стиле. Есть две цветовые вариации — Light и Dark, а также поддержка Retina-дисплеев. Впрочем, тема доступна для трех ОС.

Live reload и поддержка CSS-препроцессоров

Здесь всё довольно неоднозначно. С одной стороны, есть поддержка live reload и watch/build system с помощью плагинов (первое у меня так и не заработало), а есть несколько отдельных программ, которые, помимо live reload, умеют следить и компилировать файлы всевозможных препроцессоров. При этом функционал у них (в плане возможностей, предоставляемых GUI), совсем разный, а еще разная стоимость. Кто-то умеет всё вплоть до оптимизации изображений, а кто-то не умеет и половины, зато бесплатно. В целом же всё сводится к тому, чтобы подобрать для себя оптимальный вариант, в чем я и постараюсь вам помочь ниже.

Поддержка синтаксиса

Для начала забудем о сложностях и просто сделаем подсветку синтаксиса для нужных нам препроцессоров. Для каждого есть свой плагин, так что всё, что требуется сделать, это выбрать нужное: LESS ^[29], SASS ^[30] и SCSS ^[31], Stylus ^[32] (здесь еще и build system в комплекте).

Плагины

Здесь описываются плагины, которые пригодятся вам, если вы не хотите использовать какие-то сторонние программы, а предпочитаете обойтись одним Sublime Text 2.

Автоматическая компиляция

Начать лучше не с непосредственного добавления тех или иных build systems в редактор, а с плагина SublimeOnSaveBuild ^[33]. Всё, что он делает, заключается в автоматическом запуске Build (в меню это Tools > Build) для выбранной вами Build System в момент сохранения файла.

Что же касается добавления Build Systems, здесь всё аналогично поддержки синтаксиса, выбирайте нужное: LESS-build ^[34], SASS Build ^[35] (и, конечно, Compass ^[36]).

Live reload

С этим в плане плагинов к Sublime Text 2 не так радужно, точнее есть только один LiveReload ^[37] (не путать с программой ниже), который у меня благополучно не работает. Точнее не работает расширение для Chrome (расширение для Safari не тестировал, а поддержки других браузеров нет), ну и в целом он уже давно не обновлялся. Возможно, кто-нибудь знает, как его готовить и подскажет в комментариях, но лично мне было лень разбираться подробнее, поэтому я пришел к использованию отдельной программы для «живого просмотра» и компиляции.

Отдельные программы

Как такового отношения к Sublime Text 2 эти программы не имеют, но так как с помощью плагинов реализовывается не всё, многие предпочтут использовать отдельное ПО для некоторых функций.

LiveReload ^[38]

Возможности
LiveReload, во-первых и как следует из названия, умеет следить за изменениями файлов и обновлять их в браузере, а во-вторых, автоматически компилировать если и не всё, то многое: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade. Для самого live reload необходимо установить прилагающееся расширение в браузер ^[39], есть версии для Safari, Chrome и Firefox.

Кроссплатформенность
В целом программа для Mac OS X. Есть версия для Windows, но сегодня она представляет из себя pre-alpha версию. Для Linux предлагается использовать guard-livereload ^[40].

Цена
Версия для Mac OS X стоит $9.99 в App Store, есть и бесплатный триал. Версии для Linux и Windows бесплатны.

CodeKit ^[41]

Возможности
Эта программа предоставляет самые широкие возможности и, в общем-то, самый удобный и функциональный GUI. Умеет live reload без расширений для браузера, автоматически компилировать Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript и Compass; объединять и минифицировать скрипты, оптимизировать изображения и т. д.

Кроссплатформенность
Её нет, программа только для Mac OS X.

Цена
$25. Есть бесплатный триал.

Scout ^[42]

Возможности
В отличие от других программ, Scout умеет только компилировать SASS и Compass, зато в его GUI можно задать Output Modes, и он бесплатен.

Кроссплатформенность
Есть версии для Windows и Mac OS X, на этот раз версия для Windows полноценная. Для Linux, к сожалению, версии нет.

Цена
Бесплатно.

Лично я остановил свой выбор на LiveReload, несмотря на то, что CodeKit более функционален. Частично я заменил эту функциональность плагинами к Sublime Text 2 (всё-таки эта статья о Sublime), а остальное мне и не нужно (есть веб-сервисы или просто не пользуюсь).

Думаю, многим будет интересно узнать о других вариантах «среды front-end разработки на базе Sublime Text 2», так что предлагаю поделиться своими подборками плагинов в комментариях.

Автор: weiss