Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 1. Установка и настройка Sublime Text 3

Скачиваем и устанавливаем Sublime Text 3

Идем на сайт Sublime Text в раздел Download, и скачиваем последнюю версию ST3, не забудьте соблюсти разрядность 64 бит, или обычную (x86) для вашей версии операционной системы. Скачали, устанавливаем. После установки запускаем — проверяем что он работает.

Установим горячие клавиши для реиндентации

Открываем Preferences → Key Bindings — Default
И вверху файла добавляем строку:

{ "keys": ["alt+shift+f"], "command": "reindent" },

Здесь указано что горячие клавиши будут alt+shift+f, и по нажатию будет происходить команда реиндент.

Возможные проблемы с настройками в Sublime Text

Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.

Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.

Устанавливаем Package Control

Идем на сайт Package Control для ST3, и устанавливаем его. Package Control (PC) необходим для того чтобы расширять функциональность нашего редактора различными плагинами.

На сайте PC копируем код для ST3, в ST3 запускаем консоль (Ctrl + ~) и вставляем код с сайта, жмем Enter и ждем успешной установки. После обязательно перезапускам ST3.

Проверим работу PC. Жмем Ctrl+Shift+P и набираем Package Control — Install Package. Уже набрав первые буквы — нужная строка будет автоматически подсвечена.

Sublime Text 3 — Package Control — установка плагинов

Часть 2. Установка плагинов и расширений для Sublime Text 3

Установка темы Material Design

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

Sublime Text 3 — Package Control — установка темы Material Design

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установка темы Material Design

Также после этого, рекомендуется зайти в настройки ST3, и дописать следующие конфиги:

"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]

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

Sublime Text 3 — тема Material Design

Установка плагинов

Я установил следующие основные плагины:

Emmet (ускорение написания html и css)
Hayaku (ускоение написание css)
LESS (syntax highlighting — подсветка кода less)
Prefixr (префиксы для CSS)
Placeholders (Lorem Ipsum наполнители для html файлов)

Дополнительные:

SFTP — плагин для работы с FTP
SideBarEnhancement расширяет возможность сайт бара
SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них
AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш
BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде
jQuery набор сниппетов для jquery
AutoFileName автозаполнение путей к подключаемым файлам
CSSсomb делает код красивым
Gist сохранение отдельных участков кода на github прямо во время редактирования

Компиляция LESS кода. Плагин Less2CSS и его настройка

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt, Guard, и Less.app. Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

Устанавливаем Node.js
Устанавливаем NPM (устанавливается вместе с Node.js)
Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Откроем любой .less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

npm install -g less-plugin-clean-css

Опять пробуем сохранить .less файл. Произошел билд less файла, и рядом с style.less файлом у меня появился готовый минифицированный style.css

Компиляция SASS в Sublime Text 3

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

Устанавливаем Ruby
Запускаем консоль, и ставим Ruby Gem gem install sass
Устанавливаем плагин Sass для Sublime Text
Устанавливаем плагин Sass Build для Sublime Text
Устанавливаем плагин SublimeOnSave для Sublime Text
(мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

{
  "filename_filter": ".(sass|scss)$",
  "build_on_save": 1
}

Также не забудьте при открытом .sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении .sass файла будет компилироваться .css.

Устанавливаем и настраиваем html препроцессор Jade

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
Заходим в консоль и устанавливаем jade командой npm install jade --global
В Sublime Text устанавливаем плагин Jade Build
В Sublime Text открываем .jade файл и выбираем Jade build system
Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

Статьи по теме:

https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-1
https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-2
http://mutian.github.io/Sublime-Jade-Build/
http://webdesign-master.ru/blog/tools/525.html

Garcy999
Спасибо. А можно как то убрать вывод консоли при сохранении sass файла? А то при каждом сохранении выскакивает на пол экрана
- Юрий
  Посмотрите в настройках плагина. По моему там есть такая опция.
  Сам уже пользуюсь либо gulp less для больших проектов.
  Либо программой Koala для всех остальных — https://www.youtube.com/watch?v=Up2HeUu2q50
  http://koala-app.com/
dima manaxov
Почему то не дает записать в настройки по умолчанию команду. Не подскажете в чем проблема?
- Марьям Ханислямова
  Я думаю вам поможет вот эта выдержка из статьи))
  Возможные проблемы с настройками в Sublime Text
  Если возникает проблема с сохранением или редактированием файла, то необходимо создать файл — который указан в ошибке. В моем случае это файл: C:UsersAdminAppDataRoamingSublime Text 3PackagesDefaultDefault (Windows).sublime-keymap Я создал его и сохранил по указанном пути. Теперь Preferences → Key Bindings — Default можно редактировать.
  Есть аналогичная проблема с командой Preferences → Settings — Default, при открытии настроек их невозможно редактировать. Необходимо открыть, Нажать Ctrl+S, затем закрыть вкладку с настройками и открыть заново. После этого в C:UsersAdminAppDataRoamingSublime Text 3PackagesDefault должен появится файл с настройками — Preferences.sublime-settings — и настройки можно будет редактировать и сохранять.
- Юрий
  Может потому что пишите в Setting Default, а не в User Settings.
  Чтобы писать в Setting Default — рядом подсказали, надо пересоздать этот файл.
  А так рекомендую все же вносить в User Settings.
larisa shev
здравствуйте) установлены компиляторы Koala и Winless — оба при сохранении выдают ошибку в коде при обращении к переменным, но на выходе получается нормальный css, который в браузере отображается как надо. что это может быть за ошибка и как избавиться — не подскажете?
p.s. раньше такого не было — появилось после переустановки вин с 8 на 10
- Юрий
  Добрый день. Если вы приложите скриншот с ошибкой, то определить что за ошибка будет легче.
  - larisa shev
    https://uploads.disquscdn.com/images/f9ddac0c56256ed85ce33999c676d0a2cf8b86c1c7898034a0977a8329fddfeb.png
    - larisa shev
      https://uploads.disquscdn.com/images/37dc67babd37f0493d93a43e8b520fea2ee97290f8a3ded90a91a0b92ffd5235.png
      - Юрий
        Так намного лучше.
        Насчет Winless — не знаю что за программа.
        Кажется что компилятор у вас компилирует все less файлы по отдельности. А должен компилировать только один главный less файл, а все «частичные» подключаем в него через @import «filename»;
        1. У вас должен быть один главный less файл, назовем его main.less
        2. Импортом подключаем в него все _partials — частичные less файлы — файл с переменными, потом с миксинами, после _article.less, _header.less, _aside.less — смысл думаю ясен.
        Например @import «varables»;
        Важно все второстепенные less файлы именуем с символа подчеркивания. Тогда компилятор Koala не будет их компилировать по отдельности. Она поймет что это части одного большого файла, и скомпилирует только его.
      - larisa shev
        у меня есть общий файл, к которому подключены отдельные компоненты — с переменными, миксинами и т.д., но названы они без нижних подчеркиваний — буду переделывать, как вы говорите) большое спасибо за подробный ответ!
sasha bosco
В Sublime Text открываем .jade файл и выбираем Jade build system
Где выбрать Jade build system?
- Юрий
  В Верхнем меню редактора:
  Tools → Build System
Ашан Метро
Спасибо автору руководство и рекомендации отличные.
Есть вопрос: происходит компиляция из .less появляется файлик с стилем .css, но весь код в файле .css записан строкой.А это очень не удобно.Прошу помощи!!!
- Юрий
  Происходит это из за того что у вас включена минификация. Поменять скорее всего можно в настройках
  плагина, ищите Package settings.
  На сегодняшний день рекомендую компилировать less через программу Koala — легко установить и использовать. Инструкция — https://www.youtube.com/channel/UCBB1kqYMWUrSxrQkq8BYzZA/videos
  Либо с помощью gulp.
  - Ашан Метро
    Спасибо.Буду пробовать)
ZeeK
скажите как называется плагин , когда при нанесении курсора на какой-нибудь класс в html или функцию в JS , то он показывает расположение файла , где прописана эта функция или класс