html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле 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. Пригодится использующим заметки в комментариях.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

3

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dexter_crossfire
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции