Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3 , установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.
Класснуть
Запинить
Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять её каждый раз не практично и долго.
Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme .
По-умолчанию Sublime Text выглядит довольно печально:
Для начала необходимо настроить Package Control . Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.
![](https://i1.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/2.jpg)
Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.
Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.
Установка плагинов в Sublime Text
Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.
Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.
![](https://i1.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/3.jpg)
Самые популярные плагины для Sublime Text:
- Emmet - ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet ;
- AutoFileName - дополняет код при написании путей до файлов в вёрстке;
- Gist - подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist ;
- Sass - плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
Установка внешнего оформления Sublime Text
Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.
Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:
- One Dark Color Scheme - цветовая схема для подсветки кода;
- One Dark Material - Theme - тема оформления UI Sublime Text.
Установка плагина вручную
Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.
Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.
Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.
Тонкая настройка редактора, пресет моих настроек
Переходим к настройкам Sublime Text.
Предтавляю мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости:
Keymap (Windows Users): [ { "keys": ["alt+shift+f"], "command": "reindent" }, ] Settings: { "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }
Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) - отдельно:
{ "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }
Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) - отдельно:
[ { "keys": ["alt+shift+f"], "command": "reindent" }, ]
Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.
Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля - левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив своё значение.
![](https://i1.wp.com/webdesign-master.ru/img/blog/tools/sublime-text-3-setup/5.jpg)
Узнать какое свойство за что отвечает довольно просто - все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.
Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3"
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.
Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.
Sublime Text 3 - один из самых распространенных текстовых редакторов для программистов. Он предоставляет своим пользователям уникальные возможности, которых нет больше нигде. Одни из самых главных достоинств - кроссплатформенность и расширяемость.
Здесь можно настроить все - от внешнего вида до компонентов программы (плагинов). Но и уровень настройки у Sublime Text соответствующий - как редактор для программистов, он настраивается через исходный код, что под силу не каждому. В этой статье мы рассмотрим как выполняется настройка Sublime Text 3.
Для Sublime Text с первых же версий возможности были гораздо выше, чем у других редакторов. Шутка ли - полностью настраиваемый интерфейс, возможность настроить поведение программы, а не просто вводить текст? Что уж говорить о плагинах - код, написанный на Python, позволяет пользователю управлять редактором так, как укротитель змей, играя на магической дудочке, заставляет гигантского удава трепетать перед ним. Однако, как бы нам ни было жаль, именно это и отпугивает новичков - будучи не в состоянии настроить редактор, они перестают им пользоваться.
Настройка Sublime Text 3
Сначала поговорим про внешний вид, а затем перейдем к настройке горячих клавиш и плагинов.
1. Внешний вид Sublime Text
Итак, пора запустить Sublime Text (статья про установку - ). Многим дизайн программы нравится, другим же - нет. И сейчас перед вами встает уникальная возможность поменять интерфейс до неузнаваемости!
Самый простой с виду способ - выбрать тему через настройки. Для этого идем в меню "Preferences" -> "Color Scheme" и выбираем нужную вам тему. Но это способ лишь поменяет расцветку редактора, и ничего более.
Другой, более сложный, но верный вариант - разобраться с файлом настроек. Чтобы открыть его, перейдите в меню "Preferences" -> "Settings". И вот, перед вами не что иное, как громада текста. Но не все так сложно, как кажется! Слева - настройки по умолчанию, их трогать не надо. Их можно взять за пример. А вот справа нужно разместить свои настройки - взять, скопировать нужную строку и поменять ее значение. Основные настройки:
- "color_scheme" - цветовая тема. Можно выбрать из существующих, а можно скачать в папку Packages/Color Scheme - Default/.
- "font_face" - шрифт текста. Важно, чтобы он был в системе. Чтобы посмотреть список доступных шрифтов, откройте любой текстовый редактор, к примеру, Lible Office Writer.
- "font_size" - размер шрифта, устанавливающийся дробным или целочисленным значением.
- "font_options" - дополнительные опции шрифта типа "no_bold", "no_italic".
- "word_separators" - разделители слов.
- "line_numbers" - настройка нумерации строк.
- "gutter" - отображать ли "канавку" (в ней располагаются номера строк и закладки).
- "margin" - длина отступа от "канавки" .
- "fold_buttons" - если навести курсор на "канавку" , то будут видны треугольные стрелки, позволяющие скрыть или показать фрагмент кода между фигурными скобками. Их тут можно отключить или включить.
- "fade_fold_buttons" - если поставить значение false, то треугольные кнопки не будут скрываться.
Вот пример действия настроек (не забудьте сохранить файл):
Вы можете поэкспериментировать здесь сами. А мы идем дальше.
2. Настройка сочетаний клавиш
Да-да, вы не ослышались! Любой может настроить сочетания по-своему, присвоив им другие значения. Чтобы открыть файл, перейдите в "Preferences" -> "Key Bindings" .
Перед нами снова два файла, один из которых - настройки по умолчанию, а другой - ваши персональные настройки. Чтобы поменять сочетание, необходимо скопировать одну или несколько строк, заключенных между фигурными скобками. Вот пример моего файла:
Конечно, это ничего не меняет (это сочетание клавиш для закрытия любого приложения), однако данный файл является лишь примером.
Ну вот и все, Sublime Text стал таким, каким он вам нужен и вы знаете как настроить Sublime Text 3. А сейчас пора двигаться дальше - к установке плагинов.
3. Установка Package Control
Как уже говорилось ранее, редактор имеет возможность добавления плагинов, будь то собственные или скачанные с сайта разработчика. Однако, несмотря ни на что, установка плагинов вручную не очень удобна, и поэтому нужно скачать и установить дополнительный компонент.
Package Control - предназначен для более быстрой и удобной установки плагинов. Он позволяет устанавливать их через визуализированный интерфейс, а не через код.
Для начала установим Package Control с официального сайта. Это не значит, что мы его будем скачивать!
- Скопируем текст из соответствующего текстового поля (в зависимости от версии Sublime Text).
- С помощью сочетания клавиш "Ctrl + ~" вызываем встроенную в редактор консоль (да-да, есть и такое!).
- Вставляем скопированный код в текстовое поле и ждем успешной установки.
- Перезапускаем редактор.
Package Control установлен! Теперь пора разобраться с тем, как им пользоваться.
4. Работа с плагинами в Package Control
Чтобы запустить Package Control, необходимо набрать сочетание клавиш "Ctrl + Shift + P" и из списка выбрать элемент Package Control: Install Package.
И перед нами долгожданная установка плагинов! Теперь есть возможность быстрого их поиска и выбора, а если выбрать другие команды для Package Control, то можно и удалять, и изменять элементы редактора. Теперь надо потренироваться на установке. Уставноим Material Theme и выполним настройки темы sublime text 3.
- Запускаем установщик плагинов.
- Набираем в поле поиска Material Theme.
- Нажимаем и ждем, внизу должна появиться надпись "Installing package Material Theme" . В процессе установки будет запрошено добавление еще одного плагина, разрешаем.
Чтобы применить тему, необходимо перейти в меню "Preferences" -> "Color Scheme" -> "Material Theme" -> "schemes" , а далее - тема, которая вам больше всего понравится.
Однако это еще не все. Несмотря на установку темы в качестве плагина, она активируется не до конца. Чтобы исправить это, зайдите в файл настроек и допишите следующий текст:
"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" ]
Вид редактора после применения к нему темы:
Неплохо, да? Настройка Sublime Text 3 почти завершена. А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text.
Топ 5 плагинов для Sublime Text 3
1. Emmet
Emmet - плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, "html + tab" создает каркас документа, а " div.wrapper + tab" превратится в полноценный код:
Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора "document.querySelector("selector’);" можно просто набрать "qs + Tab" .
Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!
4. Git
Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git"а, не выходя из редактора!
Кроссплатформенный текстовый редактор.
Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)
Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.
1. Установка программы и контроль за дополнениями (Package Control)
- Устанавливаем Sublime Text 3. Тут всё просто - качаем и запускаем.
Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.
2. Настройки программы:
- Используем пробелы, вместо табов.
«translate_tabs_to_spaces»: true - Размер таба равен 4 пробела.
«tab_size»: 4Вы спросите зачем?
Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
А так же для единообразия работы в команде. - Строки не должны
заканчиваться пустыми символами .
Для этого используем плагин TrailingSpaces .
- Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:
- Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
- Запрет переноса строки.
Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
«word_wrap»: «false» - Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
- Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
- View → Side Bar → Hide Open Files - Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху
3. Полезные клавиши "hotkey" :
- В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ - далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
- Пожалуй следующее самое популярное сочетание это:
crtl + P - Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей. - Следующее по важности:
ctrl + D - Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь. - ctrl + L - Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
- Поиск… Ну наверное первое это ctrl+F - поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать "Find in folder…") Советую не включать в поиск папку «Известного толстячка»
- ctrl + shift + up/down - Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
- Теперь небольшой туториал по комбинациям комбинаций клавиш
. Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
Вот полезные из них: - ctrl + K, ctrl + 4 - Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J - разворачивает всё что есть)
- ctrl + K, ctrl + B - Скрывает/показывает SideBar. (хорошо работает с F12)
Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан.
Установка плагинов в Sublime Text
На данный момент существует два метода установки плагинов в программу:
- Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
- Через Sublime Package Control
Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем .
Для установки плагинов нужно:
- открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
- в строчке вводим Install Package и жмем ентер;
- снизу в открывшемся поле вводим название плагина, например: emmet;
- нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
- Готово.
(см инструкцию на 3 скринах)
Рассказывать о том, какие плагины популярны, а какие-нет особого смысла нет, так как в Sublime пишут на нескольких десятках языков программирования и под каждый язык есть свои плагины.
Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.
Sublime Text Emmet
Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим! и нажимаем TAB.
Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.
Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a{menu_$}
В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a{menu_$} + tab» Думаю, что суть уловили.
Advanced New File
Позволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно.
Brackethighlighter
По умолчанию если мы стоим, например на каком то div, то очень тяжело заметить закрывающий тег, так как он подчеркнут слишком бледно. Brackethighlighter.
![](https://i1.wp.com/sublimetext3.ru/wp-content/uploads/2018/02/plagin-7.jpg)
Color Highlighter
Подсказывает цвет кода, то есть по умолчанию нам не ясно, какого цвета будет код #224f43, а плагин подчеркивает код тем цветом, которым он является. Более того если мы кликнем по коду, то он выделит его этим цветом.
Gotocss Declaration
Помогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>Привет, много уже было написано про 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
Если вы еще не в курсе, 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
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.
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. Теперь подсветка будет работать.