Саша Черных

Вопросительные знаки в gutter Sublime Text показывает плагин BracketHighlighter, если

1. Есть открывающая скобка, кавычка или тег, но нет закрывающих или наоборот.
   
2. Расстояние между открывающими и закрывающими скобками, кавычками, а обычно тегами составляет более 5000 символов. Как объяснил разработчик, это сделано затем, что компьютер может подвисать, когда расстояние больше.
   

Ограничение в 5000 символов можно убрать. Preferences → Package Settings → BracketHighlighter → Bracket Settings - User → в открывшийся файл вставляем одну из следующих строк. Будьте внимательны с JSON-синтаксисом, расставляйте правильно знаки препинания.

1) "search_threshold": 20000,

5000 символов маловато, цифра увеличивается параметром search_threshold . 20000 установил пользователь Sublime Text quodlibet.

2) "ignore_threshold": true,

Сколько символов бы не располагалось между открывающим и закрывающим тегами, в gutter отобразится символ, назначенный тегам в BracketHighlighter, а не вопросительный знак. я тестировал "ignore_threshold": true, на больших файлах — подвисаний не обнаружил. Как обстоит дело на не самых мощных компьютерах, сказать не берусь.

Было:



Стало:



Чтобы вместо символов BracketHighlighter не отображались вопросительные знаки, код должен быть валидным: так, на HTML-странице не должно содержаться незакрытых тегов или наоборот открывающих тегов без закрывающих. У меня вопросительные знаки появились из-за лишнего слэша в теге <a>: <a href="http://example.com"/>Sasha Zeitgeist</a> вместо <a href="http://example.com">Sasha Zeitgeist</a>.

Для валидации HTML прямо в Sublime Text существуют плагины SublimeLinter3 и SublimeLinter-html-tidy . Об их установке я расписал здесь. Как установить линтеры для CSS, JavaScript и PHP см. статью на Хабрахабре.

Спасибо.

К сожалению, файлы с расширением .sublime-syntax могут обновляться с выходом новых билдов Sublime Text → соответственно, Ваши изменения окажутся утерянными → придётся заново туда вставлять строки. Вариант: настроить какую-нибудь SVN → клонировать папки с Вашими изменениями → после обновлений, например, в Git ввести команду git pull, которая сольёт изменения. Но это лишние движения: так, чтобы внёс изменения один раз и забыть — я не знаю, как сделать. Можно скопировать содержимое файлов в отдельные пользовательские файлы, которые затем настраиваете на использование в качестве синтаксисов для своих языков разметки/программирования, но тогда не будут получаться обновления, что ещё хуже. Поэтому лучше всего, полагаю, писать разработчикам синтаксисов, они вполне реально могут прислушаться.



Пример, если Ваш шаблон будет подсвечиваться в HTML-файле. Порядок действий, когда он начнёт подсвечиваться в JavaScript-файле аналогичный, далее по тексту вместо sashaphenomenal.html вставляте sashaphenomenal.js, а text.html.basic замените на source.js. Надеюсь, разберётесь самостоятельно.

Для начала рекомендую установить плагин Local History, дабы не пришлось прибегать к переустановке Sublime Text, если что-то поломается в дефолтных настройках синтаксисов.

Потребуется установка плагина PackageResourceViewer. После неё Ctrl+Shift+P → PackageResourceViewer: Open Resource (пользуясь fuzzy-поиском достаточно написать prv) → HTML → HTML.sublime-syntax . В открывшемся файле где-нибудь (я вставил между строками pop: true и - match: (</?)((?i:body|head|html)\b) ) копипастите следующие 2 строки и сохраняете файл:

- match: //= template/header.html
  scope: sashaphenomenal.html

После match: Ваш шаблон, после scope: — заданная область видимости.

Далее открываем файл активной цветовой схемы с расширением tmTheme. Если не знаете, как — см. тут в первых двух абзацах после Простое решение. В файле темы где-нибудь между тегами <array></array> вставляете следующий код:

<dict>
	<key>name</key>
	<string>HTML: Sasha Phenomenal</string>
	<key>scope</key>
	<string> text.html.basic sashaphenomenal.html </string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#E07585E0</string>
	</dict>
</dict>

Что содержится между тегами <string></string>, по порядку:

1. HTML: Sasha Phenomenal — произвольное имя настройки для удобства дальнейшего поиска в файле схемы или на tmTheme Editor.
   
2. text.html.basic — область видимости для HTML-файлов, sashaphenomenal.html — scope, которую мы прописали при предыдущей вставке.
   
3. #E07585E0 — цвет, я выбрал формат ARGB. Лучше задавать цвет в ARGB или HEX HEX, а не X11 colors, поскольку в Sublime Text 3 могут некорректно отображаться как минимум цвета aqua, fuchsia и lime.
   

Сохраняем файл → открываем произвольный HTML-документ → вставляем в него //= template/header.html → Ваш темплейт должен подсвечиваться вот так:


Возможно, придётся подождать несколько минут, пока изменения вступят в силу. Иногда помогает перезагрузка файлов или Sublime Text 3.

Если шаблону необходима не подсветка, а определённый цвет текста или желаете сделать его жирным/наклонным, опять же тут написано, какие ключи требуется задавать, (найдите по ссылке, где Золотой текст, Зелёный фон, Наклонный коралловый текст).

Если считаете, что подсветка этого шаблона будет полезна не только для Вас, откройте здесь New Issue и предложите свою идею разработчикам. У Sublime Text 3 хорошее сообщество, они прислушиваются ко всему конструктивному.

Спасибо.

Проверяйте, вроде ничего не должно поломаться.

1. Отображение классов, а не только их селекторов

Чтобы в теге <div class="SashaClass"></div> Sublime Text 3 искал SashaClass.

Preferences → Browse Packages... → User → создаём файл Symbol list - CSS.tmPreferences → вставляем в него следующий код и сохраняем.

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
	<key>name</key>
	<string>Symbol List: Classes</string>
	<key>scope</key>
	<string>text.html meta.class-name.html</string>
	<key>settings</key>
	<dict>
		<key>symbolIndexTransformation</key>
		<string>s/^/Class: /</string>
		<key>showInIndexedSymbolList</key>
		<integer>1</integer>
	</dict>
</dict>
</plist>

2. Отображение тегов HTML

Чтобы в теге <SashaTag></SashaTag> Sublime Text 3 искал SashaTag. Preferences → Browse Packages... → User → создаём файл Symbol list - Tags.tmPreferences → вставляем в него следующий код и сохраняем.

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
	<key>name</key>
	<string>Symbol List: Tags</string>
	<key>scope</key>
	<string>text.html entity.name.tag</string>
	<key>settings</key>
	<dict>
		<key>symbolIndexTransformation</key>
		<string>s/^/Tag: /</string>
		<key>showInIndexedSymbolList</key>
		<integer>1</integer>
	</dict>
</dict>
</plist>

3. Отображение селекторов тегов HTML

Чтобы в CSS

SashaTag {
	color: red;
}

Sublime Text 3 искал SashaTag.

Preferences → Browse Packages... → User → создаём файл Symbol list - CSS.tmPreferences → вставляем в него следующий код и сохраняем.

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
	<key>name</key>
	<string>Symbol List: CSS</string>
	<key>scope</key>
	<string>meta.selector.css</string>
	<key>settings</key>
	<dict>
		<key>symbolIndexTransformation</key>
		<string>s/^/CSS: /</string>
		<key>showInIndexedSymbolList</key>
		<integer>1</integer>
	</dict>
</dict>
</plist>

4. Отображение ID, а не только их селекторов

Чтобы в теге <div id="SashaID"></div> Sublime Text 3 искал SashaID.

Preferences → Browse Packages... → User → создаём файл Symbol list - ID.tmPreferences → вставляем в него следующий код и сохраняем.

<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
	<key>name</key>
	<string>Symbol List: ID</string>
	<key>scope</key>
	<string>text.html meta.toc-list.id.html</string>
	<key>settings</key>
	<dict>
		<key>symbolIndexTransformation</key>
		<string>s/^/ID: /</string>
		<key>showInIndexedSymbolList</key>
		<integer>1</integer>
	</dict>
</dict>
</plist>

Ctrl+Shift+R → результаты на скриншотах:



Как видим, словами Tag: Classes: ID: и CSS: отделяются типы содержимого, мы можем выбираеть, надо ли нам элемент синтаксиса HTML или CSS.

Вероятно, это не встроено нативно, потому что функции не несут надобности для большинства пользователей.



Любые символы и их сочетания по всему проекту через Ctrl+Shift+R найти не получится. Альтернатива:


Поиск по проекту

Ctrl+Shift+F → нажимаем на кнопку с тремя точками справа → выбираем папку проекта → затем жмём на кнопку Find, что выше кнопки с тремя точками → в отдельный файл выведутся варианты.



Спасибо.

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

Есть такое дело. я сам написал тему/цветовую схему: после обновления до Build 3114 поменялось множество областей видимости, и пришлось почти сутки убить, чтобы подстроиться под новые scopes.

Что делать — писать разработчикам схемы. Вообще-то они сами должны побыстее подстравиваться, но если не реагируют, следует поторопить их. Гуглите название своей цветовой схемы, переходите к её репозиторию на GitHub (в редких случаях Bitbucket). Нажимаете на «Issues», где сообщаете о проблеме:


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

Спасибо.

1. Создание собственного плагина

Preferences → Browse Packages... → в папке User создаём файл default_syntax.pyсо следующим содержимым:

import sublime, sublime_plugin
class DefaultSyntaxCommand(sublime_plugin.EventListener):
	def on_new(self, view):
		view.set_syntax_file('Packages/HTML/HTML.tmLanguage')

Сохраняем. Теперь по умолчанию новые файлы будут открываться с синтаксисом HTML, где работает Emmet.

2. Apply Syntax

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

Скачиваем ApplySyntax → перезагружаем на всякий случай Sublime Text → Preferences → Package Settings → ApplySyntax → Settings - User → задаём параметру “new_file_syntax”: вместо false значение — путь к файлу синтаксиса без расширения, для HTML это HTML/HTML. В итоге строка будет выглядеть так:

"new_file_syntax": "HTML/HTML",

Сохраняем файл, отныне все новые файлы должны открываться в синтаксисе HTML.

3. AutoSetSyntax

Демонстрация

Пример, когда синтаксис автоматически определяется как Python, ежели мы начинаем новый файл со слова import.


Установка и настройка

Скачиваем плагин AutoSetSyntax через Package Control → Preferences → Package Settings → ApplySyntax → Settings - User → в открывшийся файл вставляем следующий код:

"syntax_mapping": {
    "Packages/Python/Python.sublime-syntax": ["import"],
},

Не путайтесь в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых. Например, мой файл AutoSetSyntax.sublime-settings выглядит следующим образом:

{
    "syntax_mapping": {
        "ANSIescape/ANSI.tmLanguage": ["^\\s*\\[SideBarGit@.*\\] git l\\b"],
        "Packages/PHP/PHP.sublime-syntax": ["<\\?php", "<\\?="],
        "Packages/Python/Python.sublime-syntax": ["import"],
    },
    "working_scope": "(?x)^(text.plain | source.diff)\\b"
}

Сохраняем файл → после введения инструкции import синтаксис нового файла должен определиться как Python.

Что означает написанное

• syntax_mapping — переопределяет синтаксис, если будет введено определённое сочетание
  
• Packages/Python/Python.sublime-syntax — путь к файлу синтаксиса, начиная с Packages,
  
• import — текст, после введения которого переопределяется синтаксис. Допускается задавать в данном значении не только обычный текст, но и регулярные выражения. Например, значение для PHP — ["<\\?php",]. Обратите внимание, что слэш, экранирующий метасимвол вопросительного знака, необходимо тоже экранировать.
  

4. Дополнительные ссылки

API Sublime Text 3,
Документация плагина ApplySyntax,
Настройка автоматического определения синтаксиса д...,
В Sublime Text 3 не работает подсветка Babel скрип...,

Спасибо.