SublimeText 2 для web-разработчика
Доброго времени суток. Сегодня мы создадим комбайн для 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 так, что не пропускайте выхода новых статей.
[…] основы работы и интерфейс SublimeText 2. Превратили SublimeText 2 в редактор для WEB-разработчика ( ), поставив дополнительные плагины. Но не всегда Вы […]
[…] Вы еще этого не сделали, то посмотрите в моей статье “SublimeText 2 для web-разработчика” Понравилась статья? Поделись с […]