Не подсвечивается синтаксис scss в sublime text

Обновлено: 04.07.2024

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

Подсветка синтаксиса

Скоро наступает 2015 год, и за последние несколько лет в вебе изменилось очень многое — в CSS появились новые возможности, в JavaScript представили новую функциональность и синтаксис; также появилось множество языков, компилируемых в HTML, CSS и JS.

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

JavaScript Next — плагин, подсвечивающий синтаксис лучше, чем стандартный JavaScript-хайлайтер. К тому же этот плагин поддерживает фичи EcmaScript 6, такие как модули, классы, генераторы и многое другое.

Плагин CSS3 обеспечивает подсветку для каждой фичи из спецификации CSS3. Это значит, что вы можете использовать любые возможности CSS3 — даже те, которые реализованы ещё не в полной мере — и они будут корректно подсвечены плагином.

Разработчики, использующие Sass, должны установить плагины SCSS или Sass (в зависимости от используемого синтаксиса). Обратите внимание на то, какой именно плагин вы установили. Распространённая ошибка — установить плагин Sass, но при этом использовать синтаксис SCSS, и наоборот.

sublime_1

Разумеется, также существуют плагины для подсветки синтаксиса Stylus и Less.

Пишете на CoffeeScript? Убедитесь, что у вас установлен плагин Better CoffeeScript. Важно использовать именно его, так как официальный плагин CoffeeScript больше не поддерживается его разработчиками. Также доступен плагин для подсветки синтаксиса TypeScript.

Плагин Haml расширяет стандартные возможности для работы с Haml и подсвечивает также код на других языках, записанный в haml-файле: JS, CSS, Sass и так далее. Плагины Slim и Jade добавляют возможность подсветки синтаксиса этих языков.

Плагины

Sublime во многом обязан своей популярностью сообществу, которое создало такое большое количество полезных плагинов. Если вы — новичок, то знайте, что управление плагинами производится через Package Control.
Можно весь день обсуждать лучшие плагины для Sublime Text (я надеюсь, что именно этим вы и займётесь в комментариях), однако в этой статье мы рассмотрим must-have плагины для фронтэндера.

Color Highlighter

При работе с таблицами стилей полезно иметь какое-то наглядное представление того, как выглядит тот или иной цвет. Color Highlighter будет сканировать вашу таблицу стилей и подсвечивать все цвета, закрашивая фон текста в тот цвет, который указан. Также есть возможность настроить плагин так, чтобы он подчёркивал цвета или ставил маркер нужного цвета слева от кода.

sublime_2

Недавно в Color Highlighter была добавлена поддержка Sass, Less и Stylus переменных, благодаря чему этот плагин становится пригодным практически для любого рабочего окружения.

Emmet

Практически все знают об Emmet, и многие его используют ещё с тех пор, когда он назывался «Zen Coding». Однако, я часто вижу, что разработчики упускают из вида довольно полезные возможности этого плагина.

Emmet великолепен для быстрого написания разметки. Просто напечатайте css-селекторы для нужной вам разметки, и нажмите tab. Используете Jade, Slim или Haml? Emmet работает с ними так же хорошо, как и с HTML.

Посмотрите немного примеров использования Emmet. Также не забудьте посмотреть шпаргалку по синтаксису, в которой описаны все возможности для работы с разметкой.

Изучение возможностей Emmet в CSS — это одна из лучших инвестиций для фронтэндера. Это не только повысит скорость разработки, но и поможет предотвратить часто совершаемые ошибки.

В CSS emmet работает при помощи сокращений, напоминающих пары свойство/значение. Нет чётко определённых сокращений, emmet работает на основе так называемого fuzzy matching — он делает выбор, какое свойство использовать, на основе того, что вы ввели.

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

Sublime Linter

Проверка кода является весьма важной частью процесса разработки. Если вы никогда раньше не использовали linter, то знайте, что это инструмент для проверки качества кода. Он проверяет код на ошибки и использование плохих практик.

С помощью Sublime Linter вы можете легко проверить практически любой код. Как фронтэндеры, мы должны проверять наш JavaScript и, по возможности, CSS. Если вы совершите ошибку в коде, Sublime Linter подсветит её небольшим красным кружком.

sublime_4

Темы и цветовые схемы

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

В последней сборке Sublime Text 3 появилась возможность разместить в сайдбаре разные иконки для файлов.

Посмотрите несколько популярных тем для Sublime Text:

Solarized Dark

Solarized — это фантастическая тема, которая доступна во многих текстовых редакторах. Она стала любимой стандартной темой многих разработчиков.

sublime_5

Cobalt2

Cobalt2 это моя собственная тема, которая отлаживалась и совершенствовалась на протяжении пяти последних лет. Она основана на оригинальной теме Cobalt и имеет множество улучшений. Акцент в этой теме сделан на чистоте и ярком контрасте.

sublime_6

Seti UI

Весьма молодая тема, имеющая тёмный дизайн с акцентом на синий цвет.

sublime_7

GoTo anything

Если вы переходите на саблайм с другого текстового редактора, то вы наверняка привыкли к сайдбару и навигации по файлам из вашего старого редактора. Sublime представляет концепт GoTo anything. В простейшем случае вы можете использовать его, чтобы открыть любой файл из папки вашего проекта. Просто нажмите ctrl+p, и откроется поле ввода со списком файлов. Введите навзание нужного файла и нажмите enter. Это поле поиска поддерживает fuzzy matching, так что вам не придётся беспокоиться о правильности набранного названия или о правильном пути к файлу.

Стили и Sublime Text
Привет всем. Владеющие слепой печатью и использующие Sublime, скажите, а как из положения в котором.

Sublime text 2 sftp
какие причины могут быть что не подключается через этот плагин к серваку? Данные подключения.

Sublime Text 3 и SCSS
Никак не могу поставить нормальный плагин для scss. В том плане что не работает автокомплит. И.

Не работает корректно less в Sublime Text 3
Привет, друзья! Такая тема, подключил к саблайму лесс по инструкции на сайте .

kkksfd, скрин всего окна редактора с открытым css-файлом скиньте. kkksfd, скрин всего окна редактора с открытым css-файлом скиньте.

kkksfd, правый нижний угол, там, где Plain Text кликаете и выбираете CSS .

Добавлено через 5 минут
Закройте и откройте. Если проблема не вылечится то:
View → Syntax → Open all with current extension as. → CSS

kkksfd, правый нижний угол, там, где Plain Text кликаете и выбираете CSS. а вот здесь и загвоздка, что его теперь там вообще нет.:/ Kerry_Jr, пробовал, тоже не вышло и emmet качал, тоже не вышло.(

Ошибки в коде, Sublime Text
Sublime Text подсвечивает вопросы в строчках кода у body и table. Такая же история в конце кода с.

настройка sublime text 3 под scss
Начал использовать SCSS, такой вопрос, допустим я сделал файл _help.scss импортировал его сверху в.

Sublime text 2 - в package control cntrl + shift + p, не находит практически ничего
кто пользуется этим редактором подскажите, почему у меня в package control cntrl + shift + p .

Sublime Text 3 - Как сделать чтобы при открытии был синтаксис HTML
При открытии Sublime, открывается новый документ, который еще не сохранен. У него синтасис Plane.

Подсветка синтаксиса в Sublime Text 3
Всем привет! У меня проблема с подсветкой синтаксиса в Sublime Text 3. Установил модуль.


Sublime Text
Можно ли настроить Sublime Text 3 так, чтобы на нем было удобно писать змею? Нагуглил только про.

В следующем окне видим стандартный путь для установки программы. Нажимаем Next.

Установка редактора кода SublimeText

Далее инсталлятор предлагает включить запуск программы в контекстное меню, т.е. при нажатии на файл правой кнопкой мыши в контекстном меню мы будем видеть SublimeText для открытия файла. Это очень удобно. Поэтому устанавливаем флажок Add to explorer context menu и нажимаем кнопку Next.

Установка редактора кода SublimeText

В следующем окне нажимаем Install.

Установка редактора кода SublimeText

По окончании установки нажимаем Finish.

После этого запускаем программу, щелкнув по ярлыку на рабочем столе.

Запуск редактора кода SublimeText

Программа платная, но разработчики не ограничивают ее использование ни по функциональным возможностям, ни по времени.

Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED

Запуск редактора кода SublimeText

И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.

Запуск редактора кода SublimeText

Настройка внешнего вида программы Sublime Text. Настройка цветовых схем

Сначала отобразим боковую панель. Для этого надо выполнить команду Yiew – Side Bar – Show Side Bar

Настройка редактора кода SublimeText

Слева откроется панель, в которой будут отображаться файлы и папки верстки.

Настройка редактора кода SublimeText

Можно перетащить папку с файлами на левую панель.

Настройка редактора кода SublimeText

Настроим цветовую схему программы и кода. Для этого откроем файл с кодом html и перейдем по команде Preference – Color Scheme…

Настройка цветовых схем редактора кода SublimeText

Открывается окно с предустановленными цветовыми схемами

Настройка цветовых схем редактора кода SublimeText

При выборе любой из схем, изменяется цветовое оформление окна программы Sublime Text.

Для того, чтобы подгружать в программу дополнительные цветовые схемы, необходимо сначала установить установщик.

Для этого переходим в меню Tools – Command Palette…

Установщик плагинов редактора кода SublimeText

Появится окно с полем поиска.

Установщик плагинов редактора кода SublimeText

В поле поиска вводим install, пока не появится Install Package Control и нажимаем на него.

Установщик плагинов редактора кода SublimeText

Через некоторое время появится окно об успешной установке Package Control.

Установщик плагинов редактора кода SublimeText

Снова вызываем команду меню Tools – Command Palette…, в поле вводим install, пока не появится Package Control: Install Package и нажимаем на него.

Установщик плагинов редактора кода SublimeText

Через некоторое время появится окно со списком доступных дополнений.

Настройка цветовых схем редактора кода SublimeText

В поле поиска вводим название темы Base 16 Color Scheme.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

Нажимаем на этот пункт и ждем установки.

После установки переходим к смене схем. Выполняем команду Preferences – Color Scheme.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

И видим, что в списке появилось гораздо больше цветовых схем.

Настройка цветовой схемы Base 16 Color редактора кода SublimeText

Наберем в строке поиска Ocean и выбираем эту тему.

Настройка цветовой схемы Ocean редактора кода SublimeText

Видим, что цветовое оформление изменилось.

Настройка цветовой схемы Ocean редактора кода SublimeText

Методом перебора Вы можете подобрать для себя другую понравившуюся цветовую схему.

После этого выберем команду Preference – Theme…

Настройка цветовой схемы редактора кода SublimeText

И в появившемся окне щелкнем по Adaptive.sublime-theme.

Настройка цветовой схемы редактора кода SublimeText

После этого левая панель программы и окружение также стали темными.

Настройка цветовой схемы редактора кода SublimeText

Сделаем еще дополнительные настройки. Выполним команду Prefernce - Settings

Настройка цветовой схемы редактора кода SublimeText

Откроется новое окно, разделенное на две части. В левой части прописаны настройки по умолчанию. Их изменить нельзя, их можно только переопределить в правой части. Каждая следующая настройка должна отделяться запятой.

Настройка цветовой схемы редактора кода SublimeText

В правом окне уже прописаны некоторые настройки цветовой схемы.

Внесите запись "margin": 0, //Убираем отступ

И сохраните файл командой File – Save. Весь код немного подвинулся влево.

Настройка цветовой схемы редактора кода SublimeText

Чтобы увеличить или уменьшить размер шрифта в окне программы, достаточно зажать клавишу Ctrl и крутить колесико. Чтобы вернуться к настройкам по умолчанию, надо выполнить команду Preference – Font – Reset

Настройка шрифтов редактора кода SublimeText

Пропишем еще несколько настроек:

“tab_size”: 3, //Размер табуляции – т.е. насколько сместится курсор влево при нажатии клавиши Tab

"word_wrap": "true", //Перенос строк всегда

Настройка редактора кода SublimeText

Закройте это окно.

Продолжим настраивать окно программы. Часто в ходе верстки необходимо отображать два файла: html и css. Для этого необходимо разделить окно программы на две части. Сделать это можно командой Yiew – Layout – Columns: 2

Настройка редактора кода SublimeText

Теперь мы можем расположить два файла с кодом рядом.

Настройка редактора кода SublimeText

Синтаксис имеет определенную подсветку для каждого языка. Чтобы увидеть весь список языков и синтаксисов, надо нажать в правом нижнем углу программы на пиктограмму языка. Например, для файла html в правом нижнем углу будет запись HTML, для файла css соответственно запись CSS. Надо щелкнуть по этой записи и появится весь доступный список.

Настройка редактора кода SublimeText

Но, чтобы синтаксис подсвечивался должны быть установлены соответствующие схемы.

Установим дополнительные схемы подсветки синтаксиса.

Например, для файлов SCSS в программе нет предустановленной подсветки синтаксиса. Если мы откроем файл SCSS, то увидим только белый цвет.

Настройка редактора кода SublimeText

Выбираем команду меню Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package.

Настройка редактора кода SublimeText

Вводим SCSS.

Настройка редактора кода SublimeText

После установки в левом нижнем углу окна программы появится запись об успешной установке, но запись быстро исчезнет. Можно проверить, что синтаксис SCSS появился в общем списке. Т.е. в правом нижнем углу вызываем список и видим SCSS в конце списка.

Настройка редактора кода SublimeText

Установка необходимых плагинов

Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.

Настройка плагина AutoFileName редактора кода SublimeText

После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.

Настройка плагина AutoFileName редактора кода SublimeText

Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

Настройка плагина BracketHighlighter редактора кода SublimeText

Настройка плагина Color Highlighter редактора кода SublimeText

Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter

Настройка плагина Color Highlighter редактора кода SublimeText

Emmet – позволяет с помощью сокращений писать команды кода.

Например, чтобы написать такой код <div необходимо в редакторе набрать только имя класса и нажать клавишу Tab. Т.е. надо записать .main и нажать Tab

После установки необходимо перезапустить программу.

Goto Css Declaration – навигация в коде. Например, чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

Чтобы создать горячую клавишу, необходимо после установки плагина выполнить команду Preferences – Key Bindings.

Настройка плагина Goto Css Declaration редактора кода SublimeText

После этого появится экран из двух окон. В левом окне предустановленные настройки, которые нельзя изменить, но можно переопределить в правом окне.

Например, сделаем следующую запись

Настройка плагина Goto Css Declaration редактора кода SublimeText

Тогда переход из html файла на нужный класс в таблице стилей css будет по нажатию клавиш ctrl+q. Не забываем, что в html-файле курсор должен стоять на имени класса, который ищем в таблице стилей.

eCSStractor – плагин позволяет извлекать селекторы sass из html-кода.

Выберите в меню программы Preferences – Package Settings – eCSStractor – Key Bindings – User. Наберите следующий код.

Настройка плагина GeCSStractor редактора кода SublimeText

Выберите в меню программы Preferences – Package Settings – eCSStractor – Settings – User. Наберите следующий код.

Настройка плагина GeCSStractor редактора кода SublimeText

Теперь можно извлекать селекторы, соответствующие методолигии БЭМ, прямо из HTML кода сочетанием клавиш Ctrl+`(ё).

Tag – позволяет извлекать css селекторы из выделенного фрагмента html-кода.

Устанавливает плагин вручную. Сначала скачайте сам плагин здесь. Затем распакуйте в папку по следующему адресу

C;\Users\Твое имя пользователя\AppData\Rroaming\Sublime Text 3\ Packages

Настройка плагина Tag редактора кода SublimeText

После этого надо перезапустить Sublime Text.

Теперь надо добавить горячую клавишу. Заходим Preferences – Key Bindings. Если была предыдущая запись, новую пишем через запятую. Введите следующий код.

Настройка плагина Tag редактора кода SublimeText

Весь наш файл с учетом предыдущих установок и настроек выглядит следующим образом. У Вас он может выглядеть по-другому. Главное обратите внимание на то, что записи разделяются запятыми (строки 5 и 9).

Настройка плагина Tag редактора кода SublimeText

Ссылки для редактора Sublime Text:

Необходимые плагины:

AutoFileName – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.

BracketHighlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.

Goto-CSS-Declaration – навигация в коде. Чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.

Tag – позволяет извлекать селекторы css из выделенного фрагмента html-кода.Tag.zip Путь для распаковки плагина - C:\Users\ Твое имя пользователя \AppData\Roaming\Sublime Text 3\Packages

а также цветовую схему Base16 Color Scheme и подсветку синтаксиса SASS.

Просмотреть все установленные плагины в Sublime Text можно командой Preferences – Package Settings

Я хочу изменить / добавить подсветку синтаксиса для языка в Sublime 2/3.

Например, я хочу, чтобы ключевое слово было this окрашено в JavaScript.

Как я могу это сделать?

Я знаю, что есть файл предпочтений JavaScript C:\Program Files\Sublime Text 3\Packages , но я не знаю, что изменить, и нужно ли мне создать новый файл предпочтений JavaScript где-нибудь в этой папке %APPDATA%\Sublime Text 3 .

Подсветка синтаксиса контролируется используемой вами темой, доступной через Preferences -> Color Scheme . Темы выделяют различные ключевые слова, функции, переменные и т. Д. За счет использования областей, которые определяются серией регулярных выражений, содержащихся в .tmLanguage файле в каталоге / пакете языка. Например, JavaScript.tmLanguage файл назначает области source.js и variable.language.js к this ключевому слову. Поскольку Sublime Text 3 использует .sublime-package формат файла zip для хранения всех настроек по умолчанию, редактировать отдельные файлы не так просто.

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

Так получилось, что я разработал Neon Color Scheme пакет, доступный через Package Control, на который вы, возможно, захотите взглянуть. Моя главная цель, помимо попытки сделать широкий спектр языков как можно лучше, заключалась в том, чтобы определить как можно больше различных областей - гораздо больше, чем включено в стандартные темы. Хотя определение языка JavaScript не так тщательно, как, например, Python, Neon все же гораздо больше разнообразия, чем некоторые значения по умолчанию, такие как Monokai или Solarized .

jQuery выделен неоновой темой

Я должен отметить, что я использовал Better JavaScript определение языка @ int3h для этого изображения вместо того, которое поставляется с Sublime. Его можно установить через Package Control.

ОБНОВИТЬ

Недавно я обнаружил другое определение языка замены JavaScript - JavaScriptNext - ES6 Syntax . У него больше возможностей, чем у базового JavaScript или даже лучшего JavaScript. В том же коде это выглядит так:

JavaScriptСледующий

Кроме того, поскольку я изначально написал этот ответ, @skuroda был выпущен PackageResourceViewer через Package Control. Это позволяет вам легко просматривать, редактировать и / или извлекать части или целые .sublime-package пакеты. Итак, если вы выберете, вы можете напрямую редактировать цветовые схемы, включенные в Sublime.

ЕЩЕ ОДИН ОБНОВЛЕНИЕ

С выпуском почти всех пакетов по умолчанию на Github изменения происходят быстро и яростно. Старый синтаксис JS был полностью переписан, чтобы включить в него лучшие части синтаксиса JavaScript Next ES6, и теперь он настолько полностью совместим с ES6, насколько это возможно. Тонн других изменений были сделаны крышки угловых и краевых случаев, улучшить консистенцию, и только в целом сделать его лучше. Новый синтаксис был включен в (на данный момент) последнюю сборку разработки 3111.

Если вы хотите использовать любой из новых синтаксисов с текущей бета-сборкой 3103, просто клонируйте репозиторий Github где-нибудь и свяжите JavaScript (или любой другой язык (и), который вы хотите) в свой Packages каталог - найдите его в своей системе, выбрав Preferences -> Browse Packages. . Затем просто git pull время от времени выполняйте a в исходном каталоге репо, чтобы обновлять любые изменения, и вы сможете наслаждаться последними и лучшими! Я должен отметить, что репо использует новый .sublime-syntax формат вместо старого .tmLanguage , поэтому они не будут работать со сборками ST3 до 3084 или с ST2 (в обоих случаях вам все равно следовало обновиться до последней бета-версии или сборки для разработчиков).

В настоящее время я настраиваю свою Neon Color Scheme для обработки всех новых областей в новом синтаксисе JS, но большинство из них уже должно быть охвачено.

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

Быстрая настройка Sublime Text 3 для верстки сайтов - Видеоурок

Создание контентного сайта на Jekyll от А до Я

Вам наверняка знакома ситуация, когда на новом рабочем месте необходимо быстро установить и настроить Sublime Text для работы над новыми проектами. Как правило, тонкая настройка Sublime Text занимает много времени и выполнять ее каждый раз не практично и долго.

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения верски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme.

По умолчанию Sublime Text выглядит довольно печально:

Sublime Text по умолчанию

Установка Package Control в Sublime Text

Для начала необходимо настроить Package Control. Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чем вы получите соответствующее уведомление.

Установка Package Control в Sublime Text

Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

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

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.

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

Самые популярные плагины для Sublime Text:

  • Emmet - ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet;
  • AutoFileName - дополняет код при написании путей до файлов в верстке;
  • Gist - подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist;
  • Sass - плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.
  • terminus - плагин встроенного терминала Sublime Text.
  • W3​CValidators - мощный набор валидаторов для HTML разметки, CSS, SVG и т.д.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

  • One Dark Color Scheme - цветовая схема для подсветки кода;
  • One Dark Material - Theme - тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.

Установка Buffer Scroll вручную Sublime Text

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина, скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

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

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings) - отдельно:

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings) - отдельно:

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

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

Настройка Sublime Text - Preferences

Узнать какое свойство за что отвечает довольно просто - все свойства имеют интуитивно понятные наименования на английском языке. Любое свойство из большого обилия доступных настроек можно просто перевести на русский язык и понять, что оно означает.

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку

"C:\Users\\AppData\Roaming\Sublime Text 3"
в потаенное резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

Читайте также: