Русское сообщество Sublime Text

Основной раздел => Дополнения => Тема начата: dlcwalkoff от Октября 13, 2012, 20:39:59

Название: Готовим Sublime Text 2 для front-end
Отправлено: dlcwalkoff от Октября 13, 2012, 20:39:59
/*Перепост с Хабра (http://"http://habrahabr.ru/post/154667/") для тех, кто не читает его, да и просто, чтобы не затерялась полезная статья в будущем
P.S Большая просьба к админам - прикрутить спойлеры к редактору ::)*/

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

Sublime Text 2 (http://"http://www.sublimetext.com/2) — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.

Небольшой дисклеймер: я работаю на Mac OS X, поэтому в каких-то «кроссплатформенных моментах» могу что-нибудь не договорить, но постараюсь представить полную информацию. И еще: на истину в последней инстанции не претендую и жду ваши варианты.

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

Введение
Описание основных моментов, необходимые ссылки и т. п.

Плагины


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

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

Введение

Для того чтобы комфортно устанавливать, удалять и обновлять плагины используется Sublime Package Control (http://"http://wbond.net/sublime_packages/package_control"), его установка очень проста и описана на этой странице (http://"http://wbond.net/sublime_packages/package_control/installation"). Практически все плагины, которые могут вам понадобиться, есть в Package Control, поэтому их удобно искать здесь (http://"http://wbond.net/sublime_packages/community"). Я не советую игнорировать этот плагин и ставить что-то вручную, разве что у вас будет на это особенная причина. Можно сказать, что Package Control сейчас стандарт де-факто для Sublime Text 2.

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

Плагины

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

ZenCoding (http://"https://github.com/sublimator/ZenCoding")
ZenCoding вряд ли нуждается в комментариях, не так ли? Начатый в 2008 году pepelsbey (http://"http://habrahabr.ru/users/pepelsbey/" class="user_link), этот  «ускоритель написания кода» сэкономил страшное количество времени разработчиков. С тех пор реализован в виде плагинов для многих редакторов и IDE.

SublimeLinter (http://"http://github.com/SublimeLinter/SublimeLinter)
Этот плагин добавляет поддержку lint для многих языков, в том числе HTML, CSS и JavaScript. Для лучшей работы установите node.js (http://"http://nodejs.org/#download), подробнее об этом читайте в readme (http://"https://github.com/SublimeLinter/SublimeLinter#javascript-based-linters) на GitHub. Вообще, это один из плагинов, readme к которым лучше читать полностью.

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

Alignment (http://"http://wbond.net/sublime_packages/alignment)
Этот плагин от автора Sublime Package Control делает простым выравнивание многострочных и множественных выделенных участков кода.

CSSComb (http://"http://csscomb.com/)
О CSSComb подробно можно прочитать на хабре (http://"http://habrahabr.ru/post/149998/). Этот полезный инструмент причешет ваш CSS, расположив свойства в заданном порядке и разбив их на группы.

HTML5 (http://"https://github.com/mrmartineau/HTML5) и jQuery (http://"https://github.com/SublimeText/jQuery)
Это наборы сниппетов тегов HTML5 и методов jQuery, полный список которых можно посмотреть в Tools > Snippets.

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

Minifier (http://"https://github.com/bistory/Sublime-Minifier)
Minifier умеет минифицировать JavaScript (Google Closure Compiler (http://"https://developers.google.com/closure/compiler/) или UglifyJS (http://"https://github.com/mishoo/UglifyJS)) и CSS (Reducisaurus (http://"http://code.google.com/p/reducisaurus/)). Весь плагин заключается в двух комбинациях клавиш, одна сохраняет результат в текущем файле, а вторая в отдельном с именем name.min.ext.

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

SideBarEnhancement (http://"https://github.com/titoBouzout/SideBarEnhancements)
Как понятно из названия, добавляет некоторые полезные улучшения в сайдбар, например, пункт контекстного меню сайдбара «Open with...», позволяющий открыть файл в сторонней программе.

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

Clipboard History (http://"https://github.com/kemayo/sublime-text-2-clipboard-history)
Возможно, этот функционал лучше иметь во всей ОС, но мне хватает его в редакторе. Плагин запоминает историю буфера обмена, благодаря чему вы можете вставить не только последний скопированный фрагмент, но и любой из предыдущих.

EncodingHelper (http://"https://github.com/SublimeText/EncodingHelper)
Помимо прочего, отобржает кодировку открытого файла в строке статуса. В общем-то это единственная причина, по которой я установил этот плагин, но у него есть и другие возможности, например, он умеет предупреждать о том, что файл, открытый в неправильной кодировке, может быть поврежден.

Placeholders (http://"https://github.com/mrmartineau/Placeholders)
Часто ли вам приходится вставлять в код рыбы? Всем любителям lorem ipsum этот набор сниппетов однозначно пригодится. Кроме простого текста, умеет вставлять параграфы, списки, картинки и т. д.

Theme — Soda (http://"https://github.com/buymeasoda/soda-theme)
Это моя субъективная рекомендация обладателям Mac OS X. Тема Soda оформляет интерфейс Sublime Text 2 в нативном стиле. Есть две цветовые вариации — Light и Dark, а также поддержка Retina-дисплеев. Впрочем, тема доступна для трех ОС.

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

Поддержка синтаксиса
Для начала забудем о сложностях и просто сделаем подсветку синтаксиса для нужных нам препроцессоров. Для каждого есть свой плагин, так что всё, что требуется сделать, это выбрать нужное: LESS (http://"https://github.com/danro/LESS-sublime), SASS (http://"https://github.com/nathos/sass-textmate-bundle) и SCSS (http://"https://github.com/kuroir/SCSS.tmbundle), Stylus (http://"https://github.com/billymoon/Stylus) (здесь еще и build system в комплекте).

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

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

Что же касается добавления Build Systems, здесь всё аналогично поддержки синтаксиса, выбирайте нужное: LESS-build (http://"https://github.com/berfarah/LESS-build-sublime), SASS Build (http://"https://github.com/jaumefontal/SASS-Build-SublimeText2) (и, конечно, Compass (http://"https://github.com/WhatWeDo/Sublime-Text-2-Compass-Build-System)).

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

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

LiveReload (http://"http://livereload.com/)

Возможности
LiveReload, во-первых и как следует из названия, умеет следить за изменениями файлов и обновлять их в браузере, а во-вторых, автоматически компилировать если и не всё, то многое: LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade. Для самого live reload необходимо установить прилагающееся расширение в браузер (http://"http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-), есть версии для Safari, Chrome и Firefox.

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

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

CodeKit (http://"http://incident57.com/codekit/)

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

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

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

Scout (http://"http://mhs.github.com/scout-app/)

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

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

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

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

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