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

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент 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, его установка очень проста и описана на этой странице. Практически все плагины, которые могут вам понадобиться, есть в Package Control, поэтому их удобно искать здесь. Я не советую игнорировать этот плагин и ставить что-то вручную, разве что у вас будет на это особенная причина. Можно сказать, что Package Control сейчас стандарт де-факто для Sublime Text 2.

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

Плагины

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины

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

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

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

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

Live reload

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

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

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

LiveReload

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

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

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

CodeKit

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

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

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

Scout

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

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

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

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

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

UPD. Live edit с помощью плагина к самому SublimeText 2 организовать все-таки можно: используйте описанный в посте плагин совместо с расширением для браузера от программы LiveReload. Также есть сведения, что dev-версия плагина работает лучше. Таким образом, можно весьма полноценно обойтись без утановки дополнительного софта, т. е. только плагинами.

В комментариях упоминалось, что я не написал про плагины VCS и SFTP. Дело в том, что это нужно либо не всем, либо разное (кому-то Git, кому-то SVN, кому-то ничего не надо). Ну а так как все плагины названы в честь самих технологий, поддержку которых они добавляют, найти их не составит труда при необходимости.

И напоследок список плагинов, которые порекомендовали в комментариях (и ники сделавших это пользователей, конечно):

• Bektimirov: LiveCSS. Добавляет визуальное отображение задаваемых в CSS цветов.
• CyberAP: SublimeFileDiffs. Добавляет функцию сравнения файлов.
• roman01la: YUI-Compressor. Еще один плагин для минификации JS и CSS, использующий для этого одноименный инструмент от Yahoo!.
• JCHouse: SublimeTODO. Пригодится использующим заметки в комментариях.