Как сделать подсветку синтаксиса в коде Visual Studio

Обновлено: 21.11.2024

Подсветка синтаксиса для VSCode

Подсветка синтаксиса на основе Tree-Sitter.

C++, C, Python, TypeScript, TypeScriptReact, JavaScript

Go, Rust, Php, Ruby, ShellScript, Bash, OCaml, Lua

С++
С
Питон
TypeScript
Реакция TypeScript
JavaScript
Перейти
Ржавчина
Php
Рубин
Шеллскрипт
Баш
OCaml
Луа
Подробнее.

Обеспечивает универсальный механизм окраски синтаксиса практически для любого языка программирования. См. список поддерживаемых в настоящее время языков выше. Под капотом расширение использует VSCode Semantic Token API для переопределения окраски синтаксиса, предоставляемой стандартным сопоставлением регулярных выражений TextMate. Создавая полное синтаксическое дерево, Tree-sitter эффективно преодолевает все ограничения встроенных грамматик TextMate. Будучи контекстно-зависимым, он способен анализировать сложные языковые структуры, обеспечивая полное покрытие исходного кода. Инкрементная система синтаксического анализа обеспечивает высокую производительность. Все эти преимущества обеспечивают точную и последовательную подсветку синтаксиса.

— поставщик семантических токенов. Он соответствует текущей цветовой теме по умолчанию, как только тема включает семантическую раскрашивание с помощью параметра semanticHighlighting. Вы можете принудительно включить семантическую подсветку в settings.json :

Чтобы настроить цвета токенов, следуйте этому руководству. Например:

Если тема не назначает цвет семантическому токену, VSCode использует карту области действия семантического токена.

предоставляет следующие токены:

знак препинания – это специальный (нестандартный) токен, введенный . Его резервная область действия TextMate — "пунктуация". Резервным вариантом по умолчанию для type.modification является "storage.modifier". Обратите внимание, что если вы переопределяете цвет шрифта, вы также должны переопределять type.modification. В противном случае цвет type.modification сначала вернется к более общему типу, а не к сопоставленной области TextMate. То же самое касается переменной и variable.readonly.defaultLibrary.

Включить/отключить выделение комментариев.

Эта настройка полезна, когда у вас есть другие расширения, обеспечивающие раскрашивание комментариев. Например, выделение тегов, подобных ToDo, или синтаксиса документации, например, Doxygen или Sphinx. Чтобы не перезаписывать их раскрашивание, вы можете отключить подсветку комментариев, поставив «syntax.highlightComment»: false в свой settings.json .

Список доступных терминов.

Если вы хотите отключить определенные термины и вместо этого использовать стандартную окраску, просто удалите их из списка синтаксиса.highlightTerms в файле settings.json . По умолчанию все поддерживаемые термины включены.

Список доступных языков.

Если вы хотите отключить определенные языки и вместо этого использовать стандартную окраску, просто удалите их из списка синтаксиса.highlightLanguages в файле settings.json . По умолчанию включены все поддерживаемые языки.

использует привязки WebAssembly к библиотеке синтаксического анализа Tree-sitter. Все языковые парсеры скомпилированы в бинарные модули .wasm. Для сборки .wasm вам понадобится Emscripten SDK. Инструкции см. на странице BUILD.md.

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

О нас

Расширение Syntax Highlighter для Visual Studio Code (VSCode). На основе Tree-sitter.

Подсветка семантики — это дополнение к подсветке синтаксиса, как описано в Руководстве по подсветке синтаксиса. Visual Studio Code использует грамматики TextMate в качестве основного механизма токенизации. Грамматики TextMate работают с одним файлом в качестве входных данных и разбивают его на основе лексических правил, выраженных в регулярных выражениях.

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

Вот пример того, что может добавить семантическое выделение:

Без семантического выделения:

С семантическим выделением:

Обратите внимание на различия в цвете в зависимости от понимания символов языковой службы:

строка 10: параметр languageModes окрашен в цвет
строка 11: диапазон и позиция выделены цветом как классы, а документ — как параметр.
строка 13: getFoldingRanges окрашивается как функция.

Поставщик семантических токенов

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

API поставщика семантических токенов поставляется в двух вариантах, соответствующих возможностям языкового сервера:

DocumentSemanticTokensProvider — всегда принимает в качестве входных данных полный документ.

provideDocumentSemanticTokens — предоставляет все токены документа.
provideDocumentSemanticTokensEdits – предоставляет все токены документа в качестве разницы с предыдущим ответом.

DocumentRangeSemanticTokensProvider — работает только с диапазоном.

provideDocumentRangeSemanticTokens — предоставляет все токены диапазона документов.

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

Как видно из приведенного выше примера, провайдер присваивает имена типам и модификаторам, которые он собирается использовать в SemanticTokensLegend . Это позволяет API-интерфейсам предоставления возвращать типы токенов и изменять их в качестве указателя легенды.

Семантическая классификация токенов

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

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

VS Code поставляется с набором стандартных типов семантических токенов и модификаторов, которые могут использовать все поставщики семантических токенов. Тем не менее поставщики семантических токенов могут свободно определять новые типы и модификаторы и создавать подтипы стандартных типов.

Стандартные типы токенов и модификаторы

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

Это стандартные типы семантических токенов и модификаторы семантических токенов, предопределенные VS Code:

Стандартные типы токенов:

< td>Для идентификаторов, объявляющих функцию. < tr>

Стандартные модификаторы токена:

ID	Описание
пространство имен	Для идентификаторов, которые объявляют или ссылаются на пространство имен, модуль или пакет.
класс	Для идентификаторов, которые объявляют или ссылаются на тип класса.
enum	Для идентификаторов, которые объявляют тип перечисления или ссылаются на него.
interface	Для идентификаторов, которые объявляют или ссылаются на тип интерфейса.
struct	Для идентификаторов, которые объявляют или ссылаются на тип структуры.
typeParameter	Для идентификаторов, которые объявляют или ссылаются на параметр типа.
type	Для идентификаторов, которые объявляют или ссылаться на тип, который не описан выше.
parameter	Для идентификаторов, которые объявляют или ссылаются на параметры функции или метода.
variable	Для идентификаторов, которые объявляют или ссылаются на локальную или глобальную переменную.
property	Для идентификаторов, которые объявляют или ссылаются на свойство члена, поле члена или переменную члена.
enumMember	Для идентификаторов, которые объявляют или ссылаются на свойство, константу или член перечисления.
decorator	Для идентификаторов, которые объявляют или ссылаются на декораторы и аннотации.
event	Для идентификаторов, объявляющих свойство события.
function
метод	Для идентификаторов, объявляющих функцию или метод-член.
macro	Для идентификаторов, объявляющих макрос.
label	Для идентификаторов, объявляющих метку.< /td>
comment	Для токенов, представляющих комментарий.
string	Для токенов, представляющих строковый литерал.
ключевое слово	Для токенов, представляющих ключевое слово языка.
keyword	td>
number	Для токенов, представляющих числовой литерал.
regexp	Для токенов, представляющих литерал регулярного выражения.
operator	Для токенов, представляющих оператор.

ID	Описание
декларация	Для объявлений символов.
definition	Для определений символов, например, в заголовочных файлах.
только для чтения	Для переменных и полей-членов только для чтения (констант).
static	Для членов класса (статических членов) .
устарело	Для символов, которые больше не следует использовать.
abstract	Для абстрактных типов и функций-членов.
async	Для функций, помеченных как async.
модификация	Для ссылок на переменные, которым назначена переменная.
документация	Для появления символов в документации.
DefaultLibrary	Для символов, которые являются частью стандартной библиотеки.

Наряду со стандартными типами и модификаторами VS Code определяет сопоставление типов и модификаторов с аналогичными областями действия TextMate. Это описано в разделе Карта области семантических токенов.

Пользовательские типы токенов и модификаторы

При необходимости расширения могут объявлять новые типы и модификаторы или создавать подтипы существующих типов с помощью точек вклада semanticTokenTypes и semanticTokenModifiers в package.json своего расширения:

В приведенном выше примере расширение объявляет новый тип templateType и новый модификатор native . При именовании type в качестве супертипа новый тип наследует правила стиля, которые уже были определены для type .

Наряду с пользовательскими типами токенов расширения могут определять, как они сопоставляются с областями действия TextMate. Это описано в разделе «Пользовательские сопоставления».

Включение семантического выделения

Вычисление и выделение семантических токенов определяется параметром editor.semanticHighlighting.enabled . Он может принимать значения true , false и configureByTheme .

true и false включают или выключают семантическое выделение для всех тем.
configuredByTheme используется по умолчанию и позволяет каждой теме контролировать, включена ли семантическая подсветка. Во всех темах, которые поставляются с VS Code (например, по умолчанию "Dark+"), семантическая подсветка включена по умолчанию.

Расширения языка, зависящие от семантических токенов, могут переопределять значение по умолчанию для своего языка в файле package.json:

Тематика

Тематическое оформление — это присвоение токенам цветов и стилей. Правила оформления задаются в файлах Color Theme (формат JSON). Пользователи также могут настраивать правила тем в пользовательских настройках.

Семантическое окрашивание в цветовых темах

Два новых свойства были добавлены в формат файла цветовой темы для поддержки выделения на основе семантических токенов.

Свойство semanticHighlighting определяет, готова ли тема к выделению с помощью семантических токенов. По умолчанию это значение false, но мы рекомендуем включить его во всех темах. Свойство используется, когда для параметра editor.semanticHighlighting.enabled задано значение configureByTheme .

Свойство semanticTokenColors позволяет теме определять новые правила раскраски, соответствующие типам и модификаторам семантических токенов, выдаваемым поставщиками семантических токенов.

variable.readonly:java называется селектором и имеет форму (*|tokenType)(.tokenModifier)*(:tokenLanguage)? .

Это значение описывает стиль, если правило соответствует. Это либо строка, представляющая цвет переднего плана, либо объект в форме < передний план: строка, полужирный: логическое значение, курсив: логическое значение, подчеркивание: логическое значение> или < передний план: строка, fontStyle: строка >, как используется для темы TextMate правило в tokenColors .

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

Вот другие примеры селекторов и стилей:

Если ни одно правило не соответствует или в теме нет раздела semanticTokenColors (но включено выделение semanticHighlighting), VS Code использует карту области действия семантического токена для оценки области действия TextMate для данного семантического токена. Эта область сопоставляется с правилами оформления тем TextMate в tokenColors .

Карта области действия семантической лексемы

Чтобы семантическое выделение работало для тем, в которых не определены какие-либо конкретные семантические правила, и чтобы служить резервным вариантом для пользовательских типов токенов и модификаторов, VS Code поддерживает сопоставление селекторов семантических токенов с областями действия TextMate.

Если тема включает семантическое выделение, но не содержит правила для данного семантического токена, эти области TextMate вместо этого используются для поиска правила темы TextMate.

Предопределенные сопоставления областей TextMate

В следующей таблице перечислены предопределенные в настоящее время сопоставления.

< td>support.type < td>interface < tr>

Селектор семантических токенов	Запасная область TextMate
пространство имен	entity.name.пространство имен
type	entity.name.type
type.defaultLibrary
struct	storage.type.struct
класс	entity.name.type.class
class.defaultLibrary	support.class
entity.name.type.interface
enum	entity.name.type.enum
функция	entity.name.function
function.defaultLibrary	support.function
метод	entity.name.function.member
макрос	entity.name.function.macro
variable	variable.other.readwrite , entity.name.variable
variable.readonly	variable.other.constant
variable.readonly.defaultLibrary	support.constant< /td>
параметр	variable.parameter
свойство	variable.other.property
property.readonly	variable.other.constant.property
enumMember	variable.other.enummember
event	variable.other.event

Пользовательские сопоставления областей TextMate

Эта карта может быть расширена расширениями через точку вклада semanticTokenScopes в их package.json .

Есть два варианта использования расширений для этого:

Расширение, определяющее настраиваемые типы токенов и модификаторы токенов, предоставляет области TextMate в качестве резерва, когда тема не определяет правило оформления для добавленного типа семантического токена или модификаторов:

Поставщик грамматики TextMate может описывать области действия для конкретного языка. Это помогает с темами, которые содержат правила оформления для конкретного языка.

Попробуйте

У нас есть образец семантических токенов, в котором показано, как создать поставщика семантических токенов.

Инструмент инспектора области позволяет изучить, какие семантические токены присутствуют в исходном файле и каким правилам темы они соответствуют. Чтобы увидеть семантический токен, используйте встроенную тему (например, Dark+) в файле TypeScript.

Я разработчик JavaScript, недавно начал изучать Go. Я всегда использовал VS Code с расширениями темы, которые делают мои JS-файлы легко читаемыми, и мои глаза очень счастливы. Но когда я начал изучать новый язык, я понял, что подсветка синтаксиса, которую я получал, казалась не совсем правильной. В лучшем случае это меня немного раздражало; в худшем случае я чувствовал, что это замедляет мою работу.

TL;DR: я хотел, чтобы мои переменные были КРАСНЫМИ. Вы можете сделать это, установив правила для «editor.tokenColorCustomizations» для области токена, которая включает эти элементы, в settings.json⚡

VS Code.

Мне никогда не нужно было слишком много знать о входах и выходах VS Code, но даже после того, как я бессистемно попробовал любое расширение с более чем 1 000 загрузок, содержимое моих файлов Go все еще было довольно серым с ограниченной дифференциацией. К счастью, оказалось, что с VS Code очень легко возиться, и он отлично поддерживает как настройку существующей темы, так и разработку собственной!

Цвета, видимые в пользовательском интерфейсе Visual Studio Code, делятся на две категории:
– Цвета рабочей среды, используемые в представлениях и редакторах, от панели действий до строки состояния. […]
- Цвета и стили синтаксиса, используемые для исходного кода в редакторе. Тематика этих цветов отличается, поскольку раскраска синтаксиса основана на грамматике TextMate и темах TextMate, а также на семантических маркерах.

В документации VS Code указано, что существует два способа создания правил подсветки синтаксиса. Либо ссылаясь на существующую тему TextMate (файл .tmTheme), либо создавая собственные правила. Мы используем последнее.

Откройте проблемный файл в редакторе, затем в палитре команд ( cmd shift p ) найдите Developer: Inspect Editor Tokens and Scopes . Выбор этого параметра вызовет инспектор области относительно того места, где находится ваш текстовый курсор в документе. Инспектор отображает информацию о текущем токене.

Токен – это один или несколько символов, образующих элемент в вашем файле. Например, токен может быть оператором, примитивным значением, функцией или переменной. В свою очередь, каждый токен имеет ограниченный контекст, заданный в виде списка, разделенного точками. Области сами по себе являются вложенными, поэтому каждый токен также связан со списком родительских областей.

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

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

Откройте файл settings.json VS Code и добавьте новое поле для редактора с именем "editor.tokenColorCustomizations" и добавьте "textMateRules", как показано ниже:

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

БЫСТРЫЙ СОВЕТ. Мы можем применить одно и то же форматирование к нескольким областям, передав области видимости массив строк области!

Итак.
Я работаю аналитиком данных в среде SQL AWS Redshift.

Достаточно сказать, что найти технологию Redshift SPECIFIC довольно сложно в Интернете.

Когда я ищу Redshift в магазине расширений VS Code, ничего не получается.

Ну, это небольшая ложь, есть одна, но это тоже ложь, она просто помечена как Redshift из-за SEO.

Теперь это не стало для меня слишком большой проблемой.

Redshift очень похож на PostgreSQL и Oracle, поэтому я использовал расширения на основе Oracle.

Однако расширение Oracle, которое я использовал все это время, со временем становилось все больше и все больше содержало ошибок.

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

Похоже, все, что мне нужно, это подсветка синтаксиса SQL и библиотека фрагментов. Я подумал, что стоит попробовать сделать собственное расширение для подсветки синтаксиса, и я смогу избавиться от раздувшегося лица mcbloat.

(И я бы просто использовал внутренний глобальный файл фрагментов)

Вот уроки, которые я усвоил на этом пути.

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

Поэтому я решил, что смогу добиться здесь успеха с помощью git-bash.

Я был на 100 % уверен, что смогу взять расширение Oracle и вырвать нужные мне фрагменты, и все будет готово к обеду.

Я был очень не прав.

Есть 2 способа подсветки синтаксиса.

Первый метод требует, чтобы вы объявили, что вы выделяете в пакете JSON, используя выражения REGEX. Это то, что говорит вам документация VSCode.

Метод 2 просто требует, чтобы вы загрузили языковой пакет TextMate и ничего больше. Готово. Разработчики никогда не работали.

Каждое расширение, которое я рассматривал, использует метод языкового пакета TextMate. Можно ли найти языковой пакет для Redshift? Неа. Могу ли я изменить существующий? Не то, чтобы я мог понять.

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

Мне казалось, что я пытаюсь найти чехол для своего телефона Motorola, когда я могу найти только чехлы Samsung и Apple.

Поэтому мне пришлось выбрать первый вариант и разработать что-то самому.

Урок 2. Это было не так свободно, как я думал.

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

Хорошая подсветка синтаксиса делает функции разными цветами по сравнению с переменными. Комментарии отличаются от строк.

Наличие различных выделенных зон позволяет вашим глазам цепляться за фрагменты кода, который вы ищете.

Я знал, что для SQL я хотел выделить следующие
Команды, такие как 'select' и 'where',
Типы данных, такие как 'varchar',
Строки в одинарных и двойных кавычках,
Одинарные и блокировать комментарии
Функции, такие как 'row_number' и 'upper'
Специальные слова, такие как distkey
Специальные символы, такие как '<>'
Числа,
Активные слова, такие как 'и' , 'или', 'иначе'

К тому времени, когда я выписал каждый объект, который хотел выделить из спецификации AWS, список был очень-очень длинным, около 300 пунктов.

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

Опять я ошибся.

Поскольку в Visual Studio Code можно задать множество тем, существует множество предустановленных групп, которым вы можете соответствовать. Это упрощает работу темеров, поскольку они просто говорят, какого цвета будет определенная группа, и тогда не имеет значения, какой из 87547868545874 языков кодирования вы используете, при условии, что он соответствует предопределенной группе, он должен меняться вместе с темой.< /p>

Это означало, что мне пришлось взять мои запланированные группы и втиснуть их в доступные мне группы.

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

Урок 3. Это оказалось не так сложно, как я думал.

Я не разработчик, я понимаю основы HTML/CSS и SQL, и я отточил эти навыки до пола.Я как один из тех людей из дерева, которые могут сделать чертовски классные почтовые ящики, но не просят меня сделать стул или забор.

Я не понимаю таких вещей, как Javascript, машинописный текст или то, как они работают. Приступая к созданию расширения кода VS, я смотрел видео на YouTube и тянул git, а затем каждый раз плакал целых 5 минут. Знаете ли вы, как тяжело читать ReadMe.md со слезами на глазах.

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

Например, вы можете использовать Yeoman, пакет NPM, для создания работающей оболочки расширения VSCode, которая сразу работает и отлаживается.
Затем я сопоставил то, что хотел выделить, с предопределенными группами, указанными здесь.
Затем использовал предоставленный шаблон JSON
Вместе с этими рекомендациями по использованию регулярных выражений
И этот удобный редактор регулярных выражений, чтобы убедиться, что я все делаю правильно.

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

Репозиторий Git Hub

ронсоак / vsc_redshift_extension

Расширение кода Visual Studio для поддержки работы в среде SQL Redshift (AWS)

Проще говоря, в коде Visul Studio нет подсветки синтаксиса для Redshift AWS SQL, поэтому я сделал свой собственный. Он не бросается в глаза и никогда не будет.

Возможности

Подсветка синтаксиса для:

Команды SQL, такие как Select, Abort, Begin.
Ключевые слова SQL, такие как Date_trunc, Distkey, нижний.
Однострочные комментарии
Двойные комментарии
Строки в одинарных кавычках
Двойные кавычки
Типы данных SQL, такие как BIGINT, BOOL, VARCHAR
Константы SQL, такие как AND, BETWEEN, ILIKE
Поддержка выделения цифр.
Специальные символы, такие как =, <> , =!

Техническая информация

Подсветка синтаксиса осуществляется путем сопоставления элементов textmate.

Ключевые слова

Шаблоны, соответствующие ключевому слову.control:

ПРЕРЫВАНИЕ, ИЗМЕНЕНИЕ, АНАЛИЗ, НАЧАЛО, ВЫЗОВ, ОТМЕНА, ЗАКРЫТИЕ, КОММЕНТАРИЙ, СОВЕРШЕНИЕ, КОПИРОВАТЬ, СОЗДАТЬ, ОСВОБОДИТЬ, ОБЪЯВИТЬ, УДАЛИТЬ, УДАЛИТЬ, ЗАВЕРШИТЬ, ВЫПОЛНИТЬ, ОБЪЯСНИТЬ, ВЫБРАТЬ, ПРЕДОСТАВИТЬ, ВСТАВИТЬ, БЛОКИРОВАТЬ, ПОДГОТОВИТЬ , СБРОС, ОТМЕНА, ОТМЕНА, ВЫБРАТЬ, УСТАНОВИТЬ, ПОКАЗАТЬ, ЗАПУСТИТЬ, ОБРЕЗАТЬ, ВЫГРУЗИТЬ, ОБНОВИТЬ, ВАКУУМ

Шаблоны, соответствующие ключевому слову.other:

ABS, ACOS, ADD_MONTHS, APPROXIMATE, PERCENTILE_DISC, ASIN, ATAN, ATAN2, AVG BIT_AND, BIT_OR, BIT-WISE,…

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