Как убрать обводку текста в sublime text 3

Обновлено: 07.07.2024

enter image description here

Похоже, вы установили SublimeLinter. Он выделяет ошибки и предупреждения.

Если у вас все еще есть проблема с предложенными выше решениями (с anaconda lint):

Отключить листинг в пределах пользовательского файла настроек Anaconda, Anaconda.sublime-settings, через меню файла: Sublime > Настройки > Настройки пакетa > Anaconda > Настройки - Пользователь: Когда он открывает файл, просто введите следующее и сохраните его; -)

По крайней мере, это устранило мою проблему. Благословения (должник) < < <

Отключение повтора Annaconda в sublimetext 3 для текущего файла:

  • Введите палитру команд с помощью Cntrl + Shift + P или Command + shift + P для Mac OS X
  • Введите Anaconda: Disable linting on this file и нажмите enter
  • Чтобы снова включить linting Anaconda: Enable linting on this file

Отключение перемычки сохраняется между сеансами.

Вероятно, вы можете изменить "anaconda_linter_mark_style" на "none" и сохранить "anaconda_linter_underlines" как true . Таким образом, он будет только подчеркивать под ошибками, но не выделяет всю строку.

Если вы не хотите полностью отключать SublimeLinter, вы можете установить специальные настройки для синтаксиса. Preferences -> Package Settings -> Sublime Linter -> Settings Syntax Specific User

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

Например: мне также не нравится белый прямоугольник, поэтому я выбрал заливки.

Если вы используете Anaconda плагин (для разработки Python), это функциональная функция - это подчеркивает Синтаксические ошибки Python и нарушения PEP8.

Вы можете полностью отключить эту функцию или изменить цвет этой схемы, добавив некоторые пользовательские правила в текущую тему SublimeText:

  • В меню Sublime Text: Preferences > Browser Packages.
  • Найдите исходный файл текущей темы в открывшемся каталоге (файл *.twTheme с именем, соответствующим названию, выбранному в Preferences > Color Scheme > . )
  • Дублируйте этот файл, добавьте другое имя (например Tomorrow-my.tmTheme from Tomorrow.tmTheme )

Вставьте следующий код в этот вновь созданный файл темы непосредственно перед тегом </array> :

В моем случае необходимо было указать пункт 3., потому что цвет не обновлялся сразу после сохранения темы и перезапуска темы Sublime/switching (sublime использует какой-то буфер. ). Итак, возможно, вам придется повторять шаги 3-6, когда вы хотите немного поиграть с цветами.

Для пользователей Anaconda/Sublime

У меня есть Anaconda, и функция lint полезна, но из коробки она драконна по стилю. Когда вы наведите указатель мыши на прямоугольник, он сообщит вам номер правила, которое он применяет. Вы можете отключить те, которые, по вашему мнению, не нужны или встать с места по мере ввода кода.

На компьютерах Mac:

  • Перейти к настройкам | Просмотр пакетов | Анаконда | Anaconda.sublime-settings
  • Искать "pep8_ignore"
  • Добавьте правила, которые вы хотите удалить.

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

Вам нужно будет установить "translate_tabs_to_spaces": true в ваших пользовательских настройках, если вы перейдете с этим списком.

В качестве альтернативы вы можете установить для параметра "pep8" значение false, чтобы полностью остановить его.

enter image description here

похоже, что у вас есть SublimeLinter установлен. Он выделяет ошибки и предупреждения.

Если у вас все еще есть проблема с этими решениями, предложенными выше (с Anaconda lint):

полностью отключить пылеобразования в пользовательский файл настроек Анаконда, Анаконда.sublime-настройки, через меню Файл: Sublime > Настройки > Настройки Пакета > Anaconda > Настройки-Пользователь: Когда он открывает файл, просто введите следующее и сохраните его; -)

по крайней мере, это фиксированная моя проблема. Благословения (ля должник)

отключение Annaconda пылеобразования в sublimetext 3 для текущего файла:

  1. введите палитру команд с помощью Cntrl + Shift + P или Command + shift + P для Mac OS X
  2. тип Anaconda: Disable linting on this file и
  3. для повторного включения пылеобразования Anaconda: Enable linting on this file

отключение пылеобразования сохраняется между сеансами.

вы, вероятно, можете изменить "anaconda_linter_mark_style" до "none" и сохранить "anaconda_linter_underlines" as true . Таким образом, он будет только подчеркивать ошибки, но не выделять всю строку.

Если вы не хотите полностью отключить SublimeLinter,вы можете установить синтаксические настройки. Preferences -> Package Settings -> Sublime Linter -> Settings Syntax Specific User

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

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

если вы используете Анаконда плагин (для разработки на Python) это он пылеобразования функциональность - это основные моменты, ошибки синтаксиса Python и PEP8 нарушения.

вы можете полностью отключить эту функцию или изменить цвет этого плана, добавив некоторые пользовательские правила в текущую тему SublimeText:

  1. в меню Sublime Text: Preferences > Browser Packages.
  2. найдите исходный файл вашего текущая тема в открытом каталоге (*.twTheme файл с именем, соответствующим одному, выбранному в Preferences > Color Scheme > . )
  3. дублируйте этот файл, добавьте другое имя (например Tomorrow-my.tmTheme С Tomorrow.tmTheme )

вставьте следующий код в этот недавно созданный файл темы, справа до </array> tag:

пункт 3. был необходим в моем случае, потому что цвет не был обновлен сразу, после сохранения темы и перезапуска Sublime / переключения тем (sublime использует какой-то буфер. ). Поэтому, возможно, вам придется повторить шаги 3-6, когда вы хотите немного поиграть с цветами.

Для Пользователей Anaconda/Sublime

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

  1. перейдите в Настройки / просмотр пакетов / Anaconda / Anaconda.sublime-настройки
  2. Поиск "pep8_ignore"
  3. добавить правила, которые вы хотите удалить.

Я поместил в свой список следующие правила, которые удаляют некоторые из правил пробела, которые замедляют меня, но сохраняют правило "без вкладок".

вы хотите установить "translate_tabs_to_spaces": true в настройках пользователя, если вы идете с этим списком.

в качестве альтернативы вы можете установить" pep8 " в false, чтобы полностью остановить его.

Если ни одно из предыдущих решений не работает для вас, попробуйте это:

    перейдите в Настройки / настройки пакета | Pylinter / настройки пользователя

в файл, просто добавьте/измените следующие строки:

это сработало для меня, и в моем случае у меня была anaconda только как папка, связывающая компилятор python Sublime с компилятором python (python.exe) присутствует в папке anaconda.

Я только что обнаружил, что это также может случайно произойти на последнем слове, которое вы искали. Поэтому, если вы искали "integer", например. Тогда все экземпляры "integer" будут иметь этот белый квадрат вокруг них.

Если у тебя анаконда пылеобразования

go в Реж., как это C:\Users\giova\AppData\Roaming\Sublime текст 3\пакеты\Анаконда и сменить анаконду.sublime-settings (найдите ключи Anaconda linter и установите их в false). Посмотрите, установили ли вы другие вещи linter и измените их настройки на false, где он, похоже, полагается на линтинг, пока все не подойдет вам. Я установил разные линтеры, поэтому мне пришлось изменить их все.

похоже, у вас установлена Anaconda. Он выделяет ошибки и предупреждения. вы можете отключить предупреждения в анаконда.sublime-настройки через меню Файл:

Sublime > Настройки > Настройки Пакета > Anaconda > Настройки-Пользователь:

В открывшемся файле введите следующий код и нажмите Ctrl + S сохранить файл

вы также можете ввести этот:

но он отключает как предупреждения, так и ошибки, чего нет хорошо!--4-->

в Anaconda с Sublime Text, если вы не хотите вносить какие-либо изменения в настройки:

в случае выделения происходит, вы можете использовать сочетание клавиш (в моем случае это CTRL-ALT-R) для автоформата кода! Подсветка исчезнет немедленно.

вам просто нужно повторять это время от времени, после добавления нового кода (который не отформатирован в соответствии с правилами PEP8).

введите описание изображения здесь

Похоже, у вас установлен SublimeLinter . Он выделяет ошибки и предупреждения.

control + shift + p или cmd + shift + p, введите sublimelinter и щелкните тот, у которого есть disable Примечание. Предупреждения Anaconda отображаются в строке состояния, а НЕ в виде всплывающих подсказок. Это также может быть связано с Anaconda, чтобы отключить его, используйте cmd + shift + p или control + shift + p, в раскрывающемся меню будет опция «Anaconda: отключить линтинг в этом файле».

Если у вас все еще есть проблема с этими решениями, предложенными выше (с anaconda lint):

Полностью отключите линтинг в определяемом пользователем файле настроек Anaconda, Anaconda.sublime-settings, через меню файла: Sublime> Preferences> Package Settings> Anaconda> Settings - User: когда он открывает файл, просто введите следующее и сохраните его; -)

По крайней мере, это решило мою проблему. Благословения (должник) <> <

Я хочу иметь функцию линтинга, я просто хочу, чтобы она только выделяла то, что не так и / или указывала на ошибку в желобе, а не создавала эти раздражающие коробки вокруг всего. измените "anaconda_linter_mark_style": "outline" на "none" и "anaconda_linter_underlines": true, на false - у вас все равно будут метки, показывающие ошибки, но не раздражающие контуры / подчеркивания>. < @JamesBurke: В итоге я воспользовался вашим предложением, которое привело к запуску линтера без раздражающих контуров / подчеркиваний. Вот как выглядит мой файл Anaconda.sublime-settings :

Отключение линтинга Annaconda в sublimetext 3 для текущего файла:

  1. Войдите в палитру команд, нажав Cntrl + Shift + P или Command + shift + P для Mac OS X
  2. Введите Anaconda: Disable linting on this file и нажмите Enter
  3. Чтобы снова включить линтинг Anaconda: Enable linting on this file

Отключение линтинга сохраняется между сеансами.

Вы, вероятно, можете изменить "anaconda_linter_mark_style" на "none" и оставить "anaconda_linter_underlines" как true . Таким образом, он будет только подчеркивать ошибки, но не выделять всю строку.

Если вы не хотите полностью отключать SublimeLinter, вы можете установить настройки для конкретного синтаксиса. Preferences -> Package Settings -> Sublime Linter -> Settings Syntax Specific User

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

Например: мне также не нравится белый прямоугольник, поэтому я выбрал заливку.

Для пользователей Anaconda / Sublime

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

  1. Перейти в настройки | Обзор пакетов | Анаконда | Anaconda.sublime-настройки
  2. Искать "pep8_ignore"
  3. Добавьте правила, которые хотите удалить.

Я внес в свой список следующие правила, которые удаляют некоторые из правил пробелов, которые замедляют меня, но сохраняют правило «без вкладок».

Вы захотите установить "translate_tabs_to_spaces": true в ваших пользовательских настройках, если вы будете использовать этот список.

В качестве альтернативы вы можете установить для "pep8" значение false, чтобы полностью остановить его.

Если вы используете плагин Anaconda (для разработки на Python), это функциональность линтинга - он выделяет синтаксические ошибки Python и нарушения PEP8 .

Вы можете полностью отключить эту функцию или изменить цвет этого контура, добавив несколько настраиваемых правил в текущую тему SublimeText:

  1. В меню Sublime Text: Preferences > Browser Packages.
  2. Найдите исходный файл вашей текущей темы в открытом каталоге (файл * .twTheme с именем, соответствующим выбранному в Preferences > Color Scheme > . )
  3. Дублируйте этот файл, добавьте другое имя (например Tomorrow-my.tmTheme из Tomorrow.tmTheme )

Вставьте следующий код в этот только что созданный файл темы прямо перед </array> тегом:

Пункт 3. был необходим в моем случае, потому что цвет не был обновлен сразу, после простого сохранения темы и перезапуска Sublime / переключения тем (Sublime использует какой-то буфер? ..). Так что, возможно, вам придется повторить шаги 3-6, когда вы захотите немного поиграть с цветами.

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

Настройки

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

Важно: Для того, чтобы редактировать настройки Sublime Text найдите в меню Sublime Text 2 > Preferences > Settings - Default и выберите нужные.

sublime-settings
sublime-settings
sublime-settings

Найдите настройки, которые вы хотите изменить и добавьте их в User Settings чтобы они не удалились при обновлении редактора.

sublime-settings-2
sublime-settings-2
sublime-settings-2

Более подробно об основах работы с Sublime Text вы можете прочитать в статье Installation and Base Settings.

Шрифты и отступы

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

После того, как вы выбрали шрифт, убедитесь, что он установлен у вас на компьюетере. Затем добавьте его в настройки и измените размер и отступы, например, как здесь:

“font_face”: “Inconsolata";
"font_size": 18;
"line_padding_bottom": 1,
"line_padding_top": 1,

highlight_line

Эта настройка подсвечивает строку, на которой находится курсор другим цветом (зависит от цветовой схемы). Возможность видеть на какой строке вы сейчас находитесь помогает сконцентрироваться на текущей задаче, легко и быстро перемещаться по строкам, а также находить активную строку после переключения из другой программы.

highlight_modified_tabs

Эта настройка подсветит вкладки с измененными файлами, чтобы привлечь к ним дополнительное внимание.

fade_fold_buttons

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

word_wrap

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

bold_folder_labels

В саблайме есть несколько отличных настроек, чтобы расставить акценты в боковой панели. Начнем с bold_folder_labels , которая выделит все директории жирным.

Показывать открытые файлы в боковой панели

Странно, но это нельзя установить в конфигурационном файле. Вместо этого нужно выбрать такую настройку в меню:

View → Side Bar → Show Open Files

Выровнять боковую панель

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

Плагины

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

BracketHighlighter

Bracket highlighter это плагин, который подсвечивает парные теги и скобки (да ладно!) Но и тем не менее, это очень полезный инструмент, который показывает вам начало и конец той части кода, в которой находится курсор. Тип скобки отображается сбоку в виде разных иконок.

sublime-visual-brackethighlighter-2
sublime-visual-brackethighlighter-2
sublime-visual-brackethighlighter-2

Git Gutter

Один из моих любимых плагинов. Git gutter это простой плагин, который отображает иконки около номеров строк, которые показывают было ли что-то добавлено, изменено или удалено по сравнению с вашим git-проектом.

sublime-visual-gitgutter-2
sublime-visual-gitgutter-2
sublime-visual-gitgutter-2

SublimeLinter

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

sublime-visual-sublimelinter-2
sublime-visual-sublimelinter-2
sublime-visual-sublimelinter-2

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

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

Тема: Soda

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

sublime-visual-soda-2
sublime-visual-soda-2
sublime-visual-soda-2

Тема: Flatland

Если вы являетесь поклонником плоского дизайна, тогда Flatland это ваш вариант. Эта тема упрощает внешний вид всех элементов и позволяет менять некоторые настройки, например вид вкладок и боковой панели.

Тема: Spacegray

Моя любимая тема, в том числе набирающая популярность на GitHub – Spacegray. Эта тема может похвастаться уникальными цветами и невероятно минималистичным интерфейсом.

sublime-visual-spacegray
sublime-visual-spacegray
sublime-visual-spacegray

Цветовая схема: Solarized

Довольно-таки известный проект Solarized доступен и для Sublime Text. Этот проект позиционируется как "аккуратные и точные цвета для машин и людей" и использует большое количество положений из теории цвета.

Цветовая схема: Base16

Base16 – это еще одна популярная цветовая схема с большим количеством настроек (я в данный момент использую именно ее).

Вывод

Как же много всего еще стоит рассмотреть! Не забудьте, что имеет смысл переработать очень много разных элементов Sublime Text в процессе кастомизации. Не верьте мне на слово, поизучайте GitHub и Package Control, попробуйте какие-нибудь другие настройки и вы поймете, что вам больше подходит. Не забывайте периодически "подкручивать" что-нибудь, чтобы ваш навык программирования не стоял на месте.

А какие настройки, шрифты, плагины, темы или цветовые схемы подошли вам? Напишите в комментариях и поделитесь с теми, кому по вашему мнению будет не лишним это узнать!

В следующем окне видим стандартный путь для установки программы. Нажимаем 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

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