Доброго времени суток. Сегодня мы создадим комбайн для web-разработчика из SublimeText 2. В прошлой статье мы познакомились с основами работы и интерфейсом SublimeText 2. А в этом посте мы остановимся на настройке этого редактора, а настраивать мы будем редактор под web-разработку. Наращивать функционал будем при помощи плагинов. Поэтому первое, что мы сделаем — это установим менеджер пакетов — Sublime Package Contгol.

И так приступим к настройке нашего редактора.

Менеджер пакетов — Sublime Package Contгol

К сожалению столь замечательный пакет пока не входит в состав SublimeText 2 и поэтому его надо поставить в ручную. Как это делается я уже описывал в прошлой статье. Но пакет действительно не заменимый и поэтому я еще раз расскажу как его установить.

Открываем консоль, нажав Ctrl+` и в ней вводим следующий код:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

Теперь перезапускаем наш SublimeText 2.

Отлично менеджер пакетов установлен, можно приступить к превращению SublimeText 2 в комбайн для web-разработчика.

И первый плагин, который я хотел бы  установить — это Zen Coding.

Установка Zen Coding

Что такое ZenCoding и как с ним работать, думаю, объяснять не надо. Если же кто-то еще не в курсе, то рекомендую прочитать мою статью “Основы Zen Coding”

Открываем командную строку, нажав Ctrl+Shift+P и в ней набираем следующую команду (заметьте, что Sublime мгновенно выдает нам подходящие варианты) Package Controll: Install Package и жмем Enter. Или переходим в меню Perferences->Package Control и выбираем Package Control: Install Package. Теперь из выпадающего списка выбираем ZenCoding (не забывайте пользоваться стокой поиска)

Отлично пакет установился. Но мы видим, что данный пакет устарел и нам рекомендуют установить Emmet.

Давайте так и сделаем.

Установка Emmet

Emmet — это наследник Zen Coding, который пришел ему на смену. Благодаря Emmet написание html кода увеличивается в несколько раз. В одной из статей я остановлюсь подробнее на описании Emmet.

Для установки переходим к Package Control: Install Package и из выпадающего списка выбираем Emmet. Ждем установки и перезапускаем редактор.

Следующим шагом установим плагин поддержки HTML5 и дополнительных атрибутов HTML5

Установка поддержки HTML5 в SublimeText 2 — плагины HTML5 и HTMLAttributes

По аналогии устанавливаем плагины HTML5 и HTMLAttributes. Отлично теперь наш редактор поддерживает HTML5 и CSS плюс еще и упрощенное написание html кода. Можно приступать к верстке. Что-то еще забыли. Ах, да! Какая верстка без jQuery.

Установка поддержки jQuery

Для того, чтобы наш редактор стал понимать jQuery мы установим плагин jQuery, а также добавим пакет сниппетов для jQuery — jQuery Snippets Pack. Устанавливаем эти два пакета по аналогии с предыдущими.

Вот, теперь можно приступать к полноценной верстке. Но, давайте немного упростим написание кода, а точнее добавим подсветку скобок.

Установка BracketHighlighter

Этот простенький плагин подсвечивает скобки, тем самым мы видим где скобка открывает код и где — закрывает.

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

Установка SublimeCodeIntel

Данный плагин приближает наш редактор к IDE: умный автокомплит, подсказки, быстрый переход на объявления.

Вот в принципе и все. Наш SublimeText 2 превратился в комбайн для web-разработчика. Но хотелось бы еще научить наш редактор минимизировать JavaScript код, работать с контролем версий. А для тех кто работает, например как я, с WordPress и поддержку данной CMS.

Минимизируем JS код — плагин JSMinifier

Замечательный плагин уменьшающий JavaScript код. В основном убирает комментарии, пробелы, кавычки и др. Данный плагин основан на правилах Google Closure Compiler. А пользоваться им достаточно легко: выделяем код и жмем Ctrl+Alt+M, если же нам необходимо сохранить исходный вариант и конечный, то выделяем код жмем Ctrl+Alt+Shift+M (тем самым копируем код в буфер), открываем новый файл и вставляем уже компрессированный код.

Поддержка Git — плагина git

Так, как я работаю с Git, то и плагин использую Git, который добавляет поддержку git и упрощает работу с ним. Если же Вы используете другую систему контроля версий, то в репазитории плагинов Вы без труда найдете соответствующий плагина.

Поддержка WordPress — плагин WordPress

Данный плагин просто добавляет сниппеты для WordPress и добавляет автокомплит.

Вот теперь наш редактор Sublime Text 2 готов к бою. А в следующей статье мы поговорим о том как создать свой сниппет для SublimeText 2 так, что не пропускайте выхода новых статей.