Эта инструкция будет детальной, так как я ее пишу больше для себя, чем для других. Настройка этой IDE будет по большей степени под front-end, однако, часть плагинов универсальна и просто помогает максимально эффективно использовать эту среду разработки.
На момент написания заметки, я рекомендую использовать Sublime Text 2 вместо третьей версии. Почему? Она стабильнее и у нее возникает НАМНОГО меньше конфликтов с разными плагинами.
И так, всю заметку можно разбить на три части:
Установка
После того, как Вы скачаете этот редактор с официального сайта http://www.sublimetext.ru/ начните его установку. Сам процесс установки вопросов вызвать не должен, за исключением этого пункта:
Данный этап предлагает нам поставить галочку, если мы хотим встроить в контекстное меню (вызываемое правом кликом мыши) пункт «Открыть файл в Sublime Text». Полагаю для большинства будет удобно установить там галочку. Если Вы этого не сделали, у Вас всегда будет возможность открыть любой текстовый файл через эту IDE стандартными средствами виндовса.
Процесс установки занимает совсем немного времени и после его завершения — запускайте Ваш Sublime Text 2 (далее ST2).
Внутренняя настройка
Теперь перейдем к настройке нашего ST2. Для начала мы поменяем размер шрифта, если он нам кажется мелким. Для того, что увеличить или уменьшить размер шрифта, просто зажмите левый Ctrl и крутите колесо мыши: от себя — будет увеличиваться размер, на себя — уменьшаться.
Как и во многих других программах, в этой присутствует поддержка хоткеев (hot keys). Другими словами, мы можем нажатием комбинации клавиш выполнить какое-то действие. Посмотреть все установленные по-умолчанию комбинации можно на сайте разработчика. Их можно переопределять по своему вкусу. Для этого надо зайти в меню: Preferences -> Key Bindings — Default. В открывшемся файле можно назначить свои команды, либо переопределить уже существующие.
Теперь давайте включим левую панель, где у нас будут отображаться папки и файлы (панель выделена красным блоком):
Чтобы нам ее включить, переходим в меню View -> Side Bar ->Show Side Bar.
Теперь, после появления левой панели, навигация по файлам нашего проекта станет в разы удобнее.
Двигаемся дальше. У нас справа отображается так называемая Minimap
Чтобы убрать эту карту и освободить это место, перейдите в меню: View -> Hide Minimap и карта исчезнет. Чтобы вернуть ее, пройдите снова в меню: View — Show Minimap.
Теперь, если Вам не нравится контрастный шаблон подсветки тегов, Вы можете выбрать любой другой. Для этого надо пройти в меню Preferences -> Color Scheme -> Color Scheme Default и из выпадающего списка выбрать подходящий шаблон (у меня установлена скаченная тема 1337 Color Scheme).
После этого продолжим приводить в порядок внешний вид. Перейдем в настройки нашего ST2: Preferences -> Settings — Default
В самом редакторе у нас откроется вкладка с настройками. Тут каждая настройка хорошо задокументирована, поэтому каждую из них мы рассматривать не будем, а только те, что лично я изменял.
- строка 47 — «tab_size»: 4. Это значение говорит нам о том, что каждый раз нажимая кнопку Tab, у нас будет отступ в 4 пробела. Так принято, но не всегда удобно. Если вложенность тегов у нас большая, а такое часто случается, то получается совсем не удобно читать код, поэтому я изменил это значение на 2.
- строка 102 — «highlight_line»: false. Если мы поменяем значение с false на true, то строка, на которой установлена каретка будет подсвечиваться. Это очень удобно.
- строки 133 и 136 — «line_padding_top»: 0 и «line_padding_bottom»: 0 соответственно. Это верхний и нижний отступы между строками. Я устанавливаю значения на единицу.
- строка 201 — «auto_complete»: true. Из названия настройки понятно, что эта функция подставляет нам предполагаемые теги. Например, если мы начинаем печатать свойство background-color, то программа будет показывать нам подсказки. Это удобно, но я поставил у себя false. Отключил я это потому, что мы дальше будем ставить плагин, который заменит эту функцию.
*Номера строк в файле настроек могут не совпадать с указанными выше, но, если они отличаются, то на совсем немного. Например, строка не 201, а 194.
Следующим шагом мы добавим еще одну рабочую область в Ваш ST2. Для чего это надо? — Там образом мы сможем заниматься версткой файлов в одной области, а вносить изменения в стилевой листок — в другой. И так, идем в меню: View -> Layout -> Columns: 2
И вроде как последний штрих: давайте уберем верхнее меню, чтобы нам еще чуть-чуть освободить место. Для этого идем в меню: View — Hide Menu. Меню исчезло и, если нам нужно будет его вызвать, просто нажмите левый Alt и оно появится.
Вот теперь внутренняя настройка закончилась и приступаем на установке плагинов.
Установка плагинов
Чтобы установить плагины, нам надо сделать поддержку дополнительных пакетов. Для этого переходим сюда и внизу слева у нас есть два таба: Sublime Text 3 и Sublime Text 2. По-умолчанию у нас активный второй таб: Sublime Text 2. Под табом есть код:
import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
Вам необходимо его полностью выделить и скопировать (либо с сайта, либо тот, что указан в рамке выше).
Теперь идем в наш ST2 и переходим в меню: View -> Show Console. В открывшееся окно нам надо вставить скопированный код, нажать Enter (подождать секунд 30 пока все установится) и перезапустить ST2.
Установка плагинов будет происходить через окно Package Control, которое мы можем вызвать через меню следующим образом: Preferences -> Package Control. После вызова этой функции у нас будет список доступных команд. Нам надо выбрать Install Package. И уже с этого шага мы будем устанавливать плагины.
Первым плагином будет Emmet. Это как раз тот плагин, из-за которого я отключил auto_complete. На официальном сайте http://docs.emmet.io/ слева есть меню с инструкциями. Даже, если Вы не владеете английским языком, там все будет понятно.
Вторым плагином будет Bracket Highlight. Это очень удобный плагин, который будет нам подсвечивать теги. Например, мы открыли тег <div> и нажав на него, наш IDE покажет и подсветит его закрывающий тег, если он есть, конечно.
Третьим плагином будет Live Reload. Это вообще чудо-плагин, с которым верстка становится намного удобнее и быстрее. Суть его заключается в том, что при сохранении правок в ST2 вам нет необходимости переходить в браузер и перегружать вкладку с Вашим проектом. Этот плагин перегрузит ее автоматически. Вам же остается только править html и css файлы. Остановлюсь на его установке. Сам плагин устанавливается как и все прочие и после его установки нам надо сделать следующее:
- перейдите сюда и скачайте расширение под свой браузер.
- после того, как Вы его скачали и установили у вас в браузере появится иконка этого расширения.
Я пользуюсь Chrome и вот как она в нем выглядит:
Чтобы нам запустить эту функцию, нам надо сделать следующее:
- в панели редактирования нашего html файла вызываем контекстное меню и выбираем пункт Open in Browser
Затем, находясь в открывшейся вкладке браузера нажмите на значке расширения LiveReload. Если у Вас плагин установлен правильно и, если произошло взаимодействие с расширением, то значок поменяется как показано на картинке: 
Если Вы используете локальный сервер, то в настройках расширения, в браузере, Вам необходимо будет поставить галочку как показано на рисунке ниже
И последним плагином будет Color Highlighter. Данный плагин будет нам подсвечивать цвет. Например, у нас есть класс
.text_class { color: #eeff22; background-color: #e2e2e2 }
В данном случае нам не совсем понятно какие цвета выведут указанные значения. Так вот, установив этот плагин и кликнув потом на код цвета, ST2 покажет нам именно тот цвет, код которого мы указали.