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

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 не тестировал, а поддержки других браузеров нет), ну и в целом он уже давно не обновлялся. Возможно, кто-нибудь знает, как его готовить и подскажет в комментариях, но лично мне было лень разбираться подробнее, поэтому я пришел к использованию отдельной программы для «живого просмотра» и компиляции.

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

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, к сожалению, версии нет.

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

Напоследок

LiveCSS. Добавляет визуальное отображение задаваемых в CSS цветов.

SublimeFileDiffs. Добавляет функцию сравнения файлов.

YUI-Compressor. Еще один плагин для минификации JS и CSS, использующий для этого одноименный инструмент от Yahoo!.

SublimeTODO. Пригодится использующим заметки в комментариях.