Sublime text 3 создание синтаксиса
Обновлено: 07.07.2024
Я хочу изменить / добавить подсветку синтаксиса для языка в 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 .
Я должен отметить, что я использовал Better JavaScript определение языка @ int3h для этого изображения вместо того, которое поставляется с Sublime. Его можно установить через Package Control.
ОБНОВИТЬ
Недавно я обнаружил другое определение языка замены JavaScript - JavaScriptNext - ES6 Syntax . У него больше возможностей, чем у базового 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, но большинство из них уже должно быть охвачено.
Не помню точно, что тогда сделал, но теперь при открытии css или less файлов автоматически ставится синтаксис Pascal. Не знаете, как это убрать? Редактор — Sublime Text 3.
Положим, у нас установлен плагин LESS , но при открытии файлов с расширением less синтаксис определяется как Pascal .
1. Без установки дополнительных плагинов
View → Syntax → Open all with current extension as. → LESS → отныне ко всем файлам с расширением less будет автоматически применяться синтаксис LESS .
2. ApplySyntax
Многофункциональный плагин для работы с автоматическим определением синтаксисов. О прочих его возможностях я рассказал в других ответах.
Устанавливаем плагин через Package Control → Preferences → Package Settings → ApplySyntax → Settings - User → увидите правило "syntaxes": [] . В нём между [квадратными скобками] добавляем следующий код:
Не путайтесь в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых.
- extensions — расширение, которому мы настраиваем синтаксис,
- syntax — относительный путь к файлу синтаксиса после Packages и без расширения.
3. Как определить путь к файлу синтаксиса
Обычно достаточно повторения компьютерного языка через слэш — Python/Python или PHP/PHP , — но иногда это не срабатывает.
1. Через встроенную консоль
Открываем файл, в котором нормально определён синтаксис LESS → Ctrl+' (машинописный обратный апостроф, символ расположен на той же клавише, где кириллическая «ё») → вставляем в открывшуюся консоль следующий код:
С Sublime Text Build 3084 был добавлен новый формат определения синтаксиса с расширением.sublime-syntax.
Но я не могу найти самую основную часть информации, подробно описывающую, как эти связи соединяются!
Я не пытаюсь создать тему или изменить существующее определение синтаксиса. Я просто хочу создать подсветку синтаксиса для файлов с расширением, которое я планирую использовать для своих целей.
В определении синтаксиса я должен указать область (например, scope: source.c), но где находится этот файл области видимости? Вернее, где я могу создать свой файл области видимости и как его назвать, чтобы он загружался? Как узнать, что мой файл синтаксиса и файл области действия, который он использует, загружаются и применяются успешно? Есть ли какие-либо шаги компиляции или обновления, или все автоматически перезагружается?
Полное обсуждение того, как создать настраиваемый синтаксис, хорошо выходит за рамки чего-то столь же простого, как ответ на переполнение стека. Также я думаю, что вы делаете свою проблему более сложной, чем на самом деле (хотя создание синтаксиса в целом довольно сложно).
Для того, чтобы проделать шаги, которые вы предпримете для создания пользовательского синтаксиса, вот пример.
Для начала создайте файл со следующим содержимым и сохраните его где-нибудь как sample.ec и оставьте файл открытым:
Вы заметите, что синтаксис для этого файла установлен в Plain Text (см. Строку состояния в правом нижнем углу), который является синтаксисом по умолчанию для файлов, неизвестных Sublime.
Теперь выберите " Tools > Developer > New Syntax. в меню. Появится буфер со следующим. Используйте File > Save чтобы сохранить файл; местоположение по умолчанию будет соответствовать вашему User пакету. Имя, которое вы ему даете, не важно, но убедитесь, что расширение является sublime-syntax . В моем примере я Sample.sublime-syntax свой файл Sample.sublime-syntax .
Теперь откройте Sublime Console с помощью View > Show Console или нажмите соответствующую привязку клавиш. Вы увидите, что последняя строка в консоли:
Оставив консоль открытой, щелкните файл синтаксиса и снова выполните другую операцию сохранения, не меняя ничего. Эта же строка снова появляется в консоли.
Есть ли какие-либо шаги компиляции или обновления, или все автоматически перезагружается?
Как видно здесь, каждый раз, когда вы изменяете определение синтаксиса, файл перекомпилируется и результаты кэшируются. Таким образом, нет шагов компиляции (кроме сохранения), и ничего не нужно делать, чтобы обновить что-либо.
Теперь вернем наше внимание к образцу. Он по-прежнему открыт, и синтаксис все еще говорит, что это Plain Text .
Теперь закройте файл и снова откройте его; ярлык для этого заключается в использовании File > Open Recent > Reopen Closed File или связанного с ним привязки клавиш.
Обратите внимание, что теперь, когда файл снова открывается, есть несколько изменений. Во-первых, имя синтаксиса в нижней правой части окна говорит Sample (или то, что вы назвали вашим sublime-syntax файла выше). Для других содержимое файла теперь выделено синтаксисом.
Цвета, которые вы видите, зависят от используемой вами цветовой схемы, но пример может выглядеть так:
Как узнать, что мой файл синтаксиса и файл области действия, который он использует, загружаются и применяются успешно?
Здесь синтаксис используется автоматически, но вы обнаружите, что если вы установите флажок " View > Syntax в меню или щелкните текущее имя синтаксиса в правом нижнем углу окна, появится ваш синтаксис. Аналогично, теперь есть запись в палитре команд с именем Set Syntax: Sample (или что-то еще).
Это приводит нас к вашему последнему вопросу. Если вы вернетесь в свой файл sublime-syntax , вы увидите это вверху:
Первое, что нужно отметить, это то, что file_extensions включает ec , и наш примерный файл называется sample.ec ; поэтому этот синтаксис применяется к нему автоматически из-за его имени.
Теперь переключитесь в файл sample.ec , поместите курсор где-нибудь в буфер и используйте " Tools > Developer > Show Scope Name или нажмите соответствующий ключ.
Содержимое всплывающего окна, которое появляется, будет меняться в зависимости от того, где находится файл, в котором находится курсор, но общая точка заключается в том, что область видимости всегда начинается с source.example-c .
В определении синтаксиса я должен указать область (например, scope: source.c), но где находится этот файл области видимости? Вернее, где я могу создать свой файл области видимости и как его назвать, чтобы он загружался?
Как видно здесь, нет такой вещи, как "файл области"; файл sublime-syntax напрямую указывает область действия как часть правил синтаксиса, поэтому это единственный файл, который нужно создать для создания синтаксиса. Это может выглядеть как имя файла, но это не одно.
Области, которые применяются в правилах синтаксического соответствия в синтаксисе, должны совпадать с областями в вашей цветовой схеме, чтобы выделить синтаксис; почему вы должны использовать правила именования области для использования общего набора областей, которые все синтаксисы обмениваются, если вы также не планируете использовать цветовую схему для синтаксиса, но если вы не используете рекомендуемые области, ваш синтаксис выиграл ' t хорошо работает с другими цветовыми схемами, и ваша цветовая схема не будет работать хорошо для других синтаксисов.
С этой начальной точки вы можете изменить файл sublime-syntax здесь, чтобы он выделял файлы так, как вы хотите. Это будет включать изменение основной области сверху, применение соответствующего расширения, а затем включение всех правил, соответствующих вашему языку.
Как упоминалось выше, создание фактических правил, соответствующих вашему файлу, является самой сложной частью создания синтаксиса, если ваш формат файла очень упрощен. Он выходит за рамки того, что может быть передано в ответе "Переполнение стека", но официальная документация, приведенная выше, дает вам некоторую информацию об этом.
Помимо просмотра существующих синтаксических файлов, чтобы узнать, как они делают то, что они делают, вы также можете задать более интересные вопросы на форуме Sublime.
Расширяемость Sublime Text не знает границ. Для тех, кому мало стандартных функций, на Хабре уже рассказывали о том, как создать сниппет, как написать простой плагин, как написать сложный плагин и еще много много чего. Про ручную настройку подсветки синтаксиса толком ничего не смог найти: для кого-то слишком очевидно, кому-то просто не нужна, а кому-то и наверняка же пригодится.
Итак, задача: имея какие-нибудь абстрактные логи доступа в wonder-net:
выделить:
Дату-время — фиолетовым курсивом;
Номер карты — желтым курсивом, если не в черном списке или красным, если иначе;
ip-адрес — темно-зеленым, если не в черном списке или красным, если иначе;
scod=хх — темно-зеленым если 00 или красным, если иначе.
В нашу цветовую схему нужно добавить стили, которыми мы собираемся подсвечивать текст. Насколько я понял, все цветовые схемы аккуратно собраны в файле c:\Program Files\Sublime Text 3\Packages\Color Scheme — Default.sublime-package.
Файл представляет собой zip архив без сжатия. Распаковываем, выбираем любимую схему (по умолчанию Monokai.tmTheme) и копируем ее в…(запускаем Sublime Text: меню Preferences — Browse Packages) папку User.
Открываем свежескопированный Monokai.tmTheme для редактирования. В самом низу перед закрывающимся добавляем блоки стилей. Стиль может содержать три параметра: background, foreground и fontStyle. fontStyle в свою очередь bold, italic и underline.
фиолетовый курсив будет выглядеть так:
жирный желтый(ЖЖ):
2. В той же папке User создаем файл синтаксиса: wonderLog.tmLanguage с содержимым:
На примере видно, что если несколько регулярных выражений претендуют закрасить цвет по-разному, то приоритет будет у того, которое описано выше (первее).
Выбираем пользовательскую цветовую схему: Preferences — Color Scheme — User — Monokai.
Открываем наш чудо-лог (если расширение файла не совпадает с шаблонным, делаем View — Syntax — wonderLog) и наслаждаемся результатом:
В следующем окне видим стандартный путь для установки программы. Нажимаем Next.
Далее инсталлятор предлагает включить запуск программы в контекстное меню, т.е. при нажатии на файл правой кнопкой мыши в контекстном меню мы будем видеть SublimeText для открытия файла. Это очень удобно. Поэтому устанавливаем флажок Add to explorer context menu и нажимаем кнопку Next.
В следующем окне нажимаем Install.
По окончании установки нажимаем Finish.
После этого запускаем программу, щелкнув по ярлыку на рабочем столе.
Программа платная, но разработчики не ограничивают ее использование ни по функциональным возможностям, ни по времени.
Отличие бесплатной версии от платной в том, что в шапке программы присутствует надпись UNREGISTERED
И иногда появляется окно, предлагающее зарегистрировать и оплатить программу. Можно нажать Отмена и работать дальше.
Настройка внешнего вида программы Sublime Text. Настройка цветовых схем
Сначала отобразим боковую панель. Для этого надо выполнить команду Yiew – Side Bar – Show Side Bar
Слева откроется панель, в которой будут отображаться файлы и папки верстки.
Можно перетащить папку с файлами на левую панель.
Настроим цветовую схему программы и кода. Для этого откроем файл с кодом html и перейдем по команде Preference – Color Scheme…
Открывается окно с предустановленными цветовыми схемами
При выборе любой из схем, изменяется цветовое оформление окна программы Sublime Text.
Для того, чтобы подгружать в программу дополнительные цветовые схемы, необходимо сначала установить установщик.
Для этого переходим в меню Tools – Command Palette…
Появится окно с полем поиска.
В поле поиска вводим install, пока не появится Install Package Control и нажимаем на него.
Через некоторое время появится окно об успешной установке Package Control.
Снова вызываем команду меню Tools – Command Palette…, в поле вводим install, пока не появится Package Control: Install Package и нажимаем на него.
Через некоторое время появится окно со списком доступных дополнений.
В поле поиска вводим название темы Base 16 Color Scheme.
Нажимаем на этот пункт и ждем установки.
После установки переходим к смене схем. Выполняем команду Preferences – Color Scheme.
И видим, что в списке появилось гораздо больше цветовых схем.
Наберем в строке поиска Ocean и выбираем эту тему.
Видим, что цветовое оформление изменилось.
Методом перебора Вы можете подобрать для себя другую понравившуюся цветовую схему.
После этого выберем команду Preference – Theme…
И в появившемся окне щелкнем по Adaptive.sublime-theme.
После этого левая панель программы и окружение также стали темными.
Сделаем еще дополнительные настройки. Выполним команду Prefernce - Settings
Откроется новое окно, разделенное на две части. В левой части прописаны настройки по умолчанию. Их изменить нельзя, их можно только переопределить в правой части. Каждая следующая настройка должна отделяться запятой.
В правом окне уже прописаны некоторые настройки цветовой схемы.
Внесите запись "margin": 0, //Убираем отступ
И сохраните файл командой File – Save. Весь код немного подвинулся влево.
Чтобы увеличить или уменьшить размер шрифта в окне программы, достаточно зажать клавишу Ctrl и крутить колесико. Чтобы вернуться к настройкам по умолчанию, надо выполнить команду Preference – Font – Reset
Пропишем еще несколько настроек:
“tab_size”: 3, //Размер табуляции – т.е. насколько сместится курсор влево при нажатии клавиши Tab
"word_wrap": "true", //Перенос строк всегда
Закройте это окно.
Продолжим настраивать окно программы. Часто в ходе верстки необходимо отображать два файла: html и css. Для этого необходимо разделить окно программы на две части. Сделать это можно командой Yiew – Layout – Columns: 2
Теперь мы можем расположить два файла с кодом рядом.
Синтаксис имеет определенную подсветку для каждого языка. Чтобы увидеть весь список языков и синтаксисов, надо нажать в правом нижнем углу программы на пиктограмму языка. Например, для файла html в правом нижнем углу будет запись HTML, для файла css соответственно запись CSS. Надо щелкнуть по этой записи и появится весь доступный список.
Но, чтобы синтаксис подсвечивался должны быть установлены соответствующие схемы.
Установим дополнительные схемы подсветки синтаксиса.
Например, для файлов SCSS в программе нет предустановленной подсветки синтаксиса. Если мы откроем файл SCSS, то увидим только белый цвет.
Выбираем команду меню Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package.
Вводим SCSS.
После установки в левом нижнем углу окна программы появится запись об успешной установке, но запись быстро исчезнет. Можно проверить, что синтаксис SCSS появился в общем списке. Т.е. в правом нижнем углу вызываем список и видим SCSS в конце списка.
Установка необходимых плагинов
Auto File Name – необходим для того, чтобы Sublime Text автоматически прописывал пути к файлам, например, к картинкам.
Выполняем знакомую нам команду Tools – Command Palette…, далее вводим install и выбираем Package Control: Install Package и затем AutoFileName.
После установки этого плагина в коде можно видеть содержимое папки, например, img и выбрать соответствующий файл.
Bracket Highlighter – плагин подсветки начальных и конечных элементов, например открывающего и закрывающего тегов, начальной и конечной кавычки, открывающей и закрывающей скобки и т.д.
Дополнительные настройки плагина можно сделать, выполнив команду Tools – Color Highlighter
Emmet – позволяет с помощью сокращений писать команды кода.
Например, чтобы написать такой код <div необходимо в редакторе набрать только имя класса и нажать клавишу Tab. Т.е. надо записать .main и нажать Tab
После установки необходимо перезапустить программу.
Goto Css Declaration – навигация в коде. Например, чтобы найти блок стилей для какого-либо класса в большом файле css, необходимо в html файле установить курсор на имя этого класса и нажать горячую клавишу. После этого в файле css курсор автоматически переместится в соответствующий блок стилей.
Чтобы создать горячую клавишу, необходимо после установки плагина выполнить команду Preferences – Key Bindings.
После этого появится экран из двух окон. В левом окне предустановленные настройки, которые нельзя изменить, но можно переопределить в правом окне.
Например, сделаем следующую запись
Тогда переход из html файла на нужный класс в таблице стилей css будет по нажатию клавиш ctrl+q. Не забываем, что в html-файле курсор должен стоять на имени класса, который ищем в таблице стилей.
eCSStractor – плагин позволяет извлекать селекторы sass из html-кода.
Выберите в меню программы Preferences – Package Settings – eCSStractor – Key Bindings – User. Наберите следующий код.
Выберите в меню программы Preferences – Package Settings – eCSStractor – Settings – User. Наберите следующий код.
Теперь можно извлекать селекторы, соответствующие методолигии БЭМ, прямо из HTML кода сочетанием клавиш Ctrl+`(ё).
Tag – позволяет извлекать css селекторы из выделенного фрагмента html-кода.
Устанавливает плагин вручную. Сначала скачайте сам плагин здесь. Затем распакуйте в папку по следующему адресу
C;\Users\Твое имя пользователя\AppData\Rroaming\Sublime Text 3\ Packages
После этого надо перезапустить Sublime Text.
Теперь надо добавить горячую клавишу. Заходим Preferences – Key Bindings. Если была предыдущая запись, новую пишем через запятую. Введите следующий код.
Весь наш файл с учетом предыдущих установок и настроек выглядит следующим образом. У Вас он может выглядеть по-другому. Главное обратите внимание на то, что записи разделяются запятыми (строки 5 и 9).
Ссылки для редактора 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
Читайте также: