Как настроить Sublime Text для верстки сайтов легко и быстро

Sublime Text - это на мой взгляд, один из лучших редакторов для написания различного кода. Особенно он хорош для верстки сайтов. Если Sublime правильно настроить, то создание html и css вы можете ускорить раза в 3 или 4.

В этой статье речь пойдет о том, как настроить Sublime под себя, каие плагины лучше всего устанавливать, как это сделать и какие настройки нужно включить, чтобы работа с кодом доставляла одно удовольствие.

Я сознательно пропущу ту часть где вы скачиваете Sublime, думаю эта часть у всех получилась довольно легко и не надо заострять на этом внимание, мы же с вами пишем код, скачивать проги мы точно все умеем.

Основы установки плагинов и расширений в Sublime Text

Для того, чтобы скачать какую-либо утилиту или плагин в Sublime Text для начала нужно установить утилиту Package Control. Чтобы установить эту утилиту нажимаем Ctrl + Shift + P и в появившемся окне вводим install Package.

Затем, кликаем на install Package Control и ждем появления уведомления о том, что утилита установлена. Теперь мы можем устанавливать плагины, расширения или темы.

А теперь, погнали устанавливать расширения. И первым из них будет Emmet - крутейшая вещь, ускоряющая написание и правку html в разы.

Устанавливаем Emmet

Нажимаем Ctrl + Shift + P, в появившемся окне вводим Package Control install Package, кликаем по нему. Далее в появившемся окне вводим emmet  и кликаем по названию.

Ждем уведомления об успешной установке (доли секунды вообще). И все - самое нужное расширение у нас уже установлено.

Что он вообще позволяет сделать, зачем мы его ставили? Если коротенько, то Emmet позволяет вот такой код .new-page-link нажатием кнопки Tab привести к виду <div class="new-page-link"></div>. Круто не павда ли? А если написать немного по-другому p.yellow, то на выходе мы получим <p class="yellow"></p>. Или еще немного магии. Чтобы получить стандартную разметку html документа нужно просто написать ! и нажать Tab.

Важна вещь! После того как вы скачали какой-либо плагин Sublime Text нужно перезапустить, чтобы изменения применились.

Устанавливаем AutoFileName

Установка аналогична предыдущему расширению  Нажимаем Ctrl + Shift + P, в появившемся окне вводим Package Control install Package, кликаем по нему. Далее в появившемся окне вводим AutoFileName и кликаем по названию.

Что позволяет делать это расширение? Оно автоматически подставляет имена файлов и папок. Т.е., допустим надо нам поместить картинку, мы разметили <img src=" ">  и вот, как раз в src и включится AutoFileName, он сперва предложит нам выбрать папку из имеющихся в проекте, а затем предложит выбрать файл из этой папки.

Т.е. не нужно ничего писать руками и судорожно вспоминать, как же называется файл или папка. Удобно? Еще как.

Работаем в двух окнах

Sublime позволяет нам работать разделив экран на две части. Что супер удобно при верстке, когда слева у тебя открыт html, а справа css. И не нужно при этом постоянно метаться между вкладками туда-сюда.

Чтобы это реализовать нужно просто перейти в меню View - Layout - Columns 2 (либо нажать Alt + Shift +2).

И теперь мы получаем вот такое чупер мега удобное рабочее пространство.

На этом основная настройка Sublime завершена. Все самые нужные и необходимые расширения установлены, а рабочее пространство приведено в удобный вид. Вообще в Sublime довольно много всяких интересных фишек, но чтобы про все рассказать потребуется больше одной статьи, поэтому я расскажу о них в следующих статьях своего блога.