Как сделать подсветку синтаксиса в visual studio code
Обновлено: 04.07.2024
В настоящее время я пытаюсь написать расширение для нового типа файла (ANTLR) и задаюсь вопросом, как изменить цвета, используемые для выделения синтаксиса в Visual Studio Code. Мне кажется, что это определено не в расширении, а где-то еще. Нет записи в настройках для цветов, и я не нашел файл CSS, который это определяет (чего я ожидал, поскольку vscode использует Electron). Я также просмотрел файл настроек, сгенерированный vscode, и файлы, которые были с ним, но тоже не поняли. Не помог и поиск в Интернете. Итак, я немного потерялся.
Может ли кто-нибудь дать мне несколько советов или указать на соответствующую документацию?
3 ответа
Нет необходимости обновлять тему, из официальной документации:
Чтобы настроить цвета подсветки синтаксиса редактора, используйте editor.tokenColorCustomizations в файле настроек пользователя settings.json.
Помимо простой настройки токенов, вы можете полностью переопределить правила TextMate с помощью немного более сложных настроек, например:
Правила выделения синтаксиса хранятся в файлах .plist (или, альтернативно, в файлах .tmLanguage ). В этих файлах для выделения синтаксиса объявлены разные типы токенов:
- Что такое ключевое слово?
- Что такое строковый литерал?
- Что за комментарий?
- и т.п.
Вы не определяете цвета в файлах .plist !
Связь между типами токенов и цветами устанавливается в объявлениях цветовой темы.
Вы можете рассмотреть возможность использования цветовой темы
Поддержка тем для семантических токенов
Цветовые темы теперь могут записывать правила для цветных семантических токенов, сообщаемых языковыми расширениями, такими как TypeScript.
Приведенное выше правило определяет, что все объявления переменных, доступных только для чтения, в Java должны быть окрашены жадным шрифтом и жирным шрифтом.
Дополнительную информацию см. На странице семантического выделения вики.
У меня есть текстовый файл (.txt) с CSS, и я хочу получить подсветку синтаксиса. Вы можете открыть командную палитру с помощью ctrl + shift + p . Но там вы не можете установить синтаксис, как в Sublime.
Есть ли какой-нибудь другой способ получить CSS-раскраску из моего текстового файла?
Для дальнейшего акцентирования решения здесь не относятся к Visual Studio, к сожалению. Я только сегодня узнал о существовании кода Visual Studio. Было бы хорошо, если бы обычная Visual Studio использовала подобный переключатель языкового режима. О, Microsoft .В самом правом нижнем углу, слева от смайлика, была иконка «Простой текст». При нажатии на нее появляется меню со всеми языками, где вы можете выбрать нужный язык.
Нажмите, Ctrl + K M а затем введите (или щелкните) нужный вам язык.
В качестве альтернативы, чтобы получить к нему доступ из палитры команд, найдите «Изменить режим языка», как показано ниже:
Еще одна причина, по которой людям может быть трудно заставить работать подсветку синтаксиса, заключается в том, что у них не установлен соответствующий пакет синтаксиса. Хотя некоторые синтаксические пакеты по умолчанию поставляются предварительно (например, Swift, C, JS, CSS), другие могут быть недоступны.
Чтобы решить эту проблему, вы можете Cmd + Shift + P → «установить расширения» и найти язык, который вы хотите добавить, скажем «Scala».
Найдите подходящий пакет синтаксиса, установите его и перезагрузите. Это подберет правильный синтаксис для ваших файлов с предопределенным расширением, т.е. .scala в этом случае.
Кроме того, вы можете захотеть, чтобы VS Code рассматривал все файлы с определенными пользовательскими расширениями как предпочитаемый вами язык. Допустим, вы хотите выделить все *.es файлы как JavaScript, а затем просто открыть «Настройки пользователя» ( Cmd + Shift + P → «Настройки пользователя») и настроить свою пользовательскую ассоциацию файлов следующим образом:
Вы получаете от меня cookie-файл с ассоциацией файлов, спасибо!Подсветка синтаксиса для пользовательского расширения файла
Любое пользовательское расширение файла может быть связано со стандартной подсветкой синтаксиса custom files association в настройках пользователя следующим образом.
Обратите внимание, что это будет постоянная настройка. Чтобы установить только для текущего сеанса, введите предпочтительный язык в Select Language Mode поле (без изменения file association настроек)
Установка нового синтаксического пакета
Если требуемый синтаксический пакет по умолчанию недоступен, вы можете добавить его через Extension Marketplace ( Ctrl+Shift+X ) и выполнить поиск языкового пакета.
Вы можете дополнительно воспроизвести вышеописанные шаги, чтобы сопоставить расширения файлов с новым синтаксическим пакетом.
Чтобы навсегда установить синтаксис языка:
откройте settings.json файл
*) форматировать все текстовые файлы с форматированием javascript
*) форматировать все несохраненные файлы (без названия-1 и т. д.) в javascript:
Обратите внимание, что для редактора «Без названия» (« Untitled-1 », « Untitled-2 ») теперь вы можете установить язык в настройках.
Предыдущая настройка была:
Это больше не всегда будет работать, потому что с VSCode 1.42 (Q1 2020) изменится название этих редакторов без названия . Название теперь будет первой строке документа для заголовка редактора , а также общее название как часть описания. Это больше не начинается с " "
untitled-
Visual Studio Code - один из наиболее часто используемых редакторов кода в мире прямо сейчас. Когда вы такой популярный редактор, люди создают хорошие плагины. Один из таких плагинов - отличный инструмент, который может помочь нам, разработчикам Vue.js.
Visual Studio Code - один из наиболее часто используемых редакторов кода в мире прямо сейчас. У редакторов, как и у многих программных продуктов, есть цикл. Когда-то фаворитом разработчиков был TextMate, затем Sublime Text, теперь VS Code.
Самое замечательное в популярности состоит в том, что люди посвящают много времени созданию плагинов для всего, что они представляют.
Один из таких плагинов - отличный инструмент, который может помочь нам, разработчикам Vue.js.
Ветур
Это называетсяВетур, он очень популярен, его скачали более 3 миллионов раз, и вы можете найти егов Visual Studio Marketplace.
Установка Vetur
Нажатие кнопки Install вызовет панель установки в VS Code:
Вы также можете открыть расширения в VS Code и выполнить поиск по запросу «vetur»:
Что дает это расширение?
Подсветка синтаксиса
Vetur обеспечивает подсветку синтаксиса для всех файлов исходного кода Vue.
Без Vetur файл .vue будет отображаться VS Code следующим образом:
с установленным Vetur:
VS Code может распознавать тип кода, содержащегося в файле, по его расширению.
Используя однофайловый компонент, вы смешиваете разные типы кода внутри одного файла, от CSS до JavaScript и HTML.
VS Code по умолчанию не может распознать такую ситуацию, а Vetur позволяет выделять синтаксис для каждого типа кода, который вы используете.
Vetur предоставляет поддержку, среди прочего, для
Фрагменты
Как и в случае с подсветкой синтаксиса, поскольку VS Code не может определить тип кода, содержащегося в части файла .vue, он не может предоставить фрагменты, которые мы все любим: фрагменты кода, которые мы можем добавить в файл, предоставляемые специализированными плагинами.
Vetur предоставляет VS Code возможность использовать ваши любимые фрагменты в однофайловых компонентах.
IntelliSense
IntelliSense также включен, Vetur, для каждого отдельного языка с автозаполнением:
Строительные леса
Помимо включения настраиваемых сниппетов, Vetur предоставляет собственный набор сниппетов. Каждый из них создает определенный тег (шаблон, скрипт или стиль) на своем собственном языке:
- vue
- template with html
- template with pug
- script with JavaScript
- script with TypeScript
- style with CSS
- style with CSS (scoped)
- style with scss
- style with scss (scoped)
- style with less
- style with less (scoped)
- style with sass
- style with sass (scoped)
- style with postcss
- style with postcss (scoped)
- style with stylus
- style with stylus (scoped)
Если вы напечатаете vue , вы получите стартовый пакет для однофайлового компонента:
другие специфичны и создают единый блок кода.
Примечание: (с ограничением) означает, что он применяется только к текущему компоненту
Эммет
Эмметпо умолчанию поддерживается популярный механизм сокращений HTML / CSS. Вы можете ввести одно из сокращений Эммета и, нажав tab VS Code автоматически расширит его до эквивалента HTML:
Линтинг и проверка ошибок
Форматирование кода
Vetur обеспечивает автоматическую поддержку форматирования кода для форматирования всего файла при сохранении (в сочетании с "editor.formatOnSave" Настройка VS Code.
Вы можете отключить автоматическое форматирование для определенного языка, установив параметр vetur.format.defaultFormatter.XXXXX к none в настройках VS Code. Чтобы изменить одну из этих настроек, просто начните поиск строки и переопределите то, что вы хотите в пользовательских настройках (правая панель).
Большинство поддерживаемых языков используютКрасивеедля автоматического форматирования, инструмент, который становится отраслевым стандартом.
Использует вашу конфигурацию Prettier для определения ваших предпочтений.
Установка и использование расширения в редакторе кода VSCode для правильной подсветки синтаксиса кода файлов шаблонов и htm для Winter CMS.
Для тех кто работает с Winter CMS в редакторе VSCode, будет полезно расширение OctoberCMS Template Language.
Это расширение выполнит правильную подсветку кода в файлах .htm которые повсеместно используются в Winter CMS.
Установить это расширение можно прямо из редактора. Для этого достаточно в панеле Расширения ввести в поиске october
Чтобы заработала правильная подсветка кода, нужно всего лишь поставить в начале html-блока или Twig-сценария:
Подсветка html и твигов будет правильной.
Читайте также: