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

Установка и настройка 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 - установка плагинов

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

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

 

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

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

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

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 кода. Плагин Less2CSS и его настройка

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

  1. Устанавливаем Node.js
  2. Устанавливаем NPM (устанавливается вместе с Node.js)
  3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
  4. Установим плагин 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 в 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

Устанавливаем и настраиваем 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 файла? А то при каждом сохранении выскакивает на пол экрана

  • 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
        • larisa shev
          • Так намного лучше.
            Насчет 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 , то он показывает расположение файла , где прописана эта функция или класс

  • dorelly2

    А для какой операционной системы приводится эта инструкция? А если у меня Sublime Text 3 стоит на Windows 7 и я не смог там даже установить Package Control?