В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.
Прежде, чем рассмотреть все эти варианты, я отмечу, что VSCode может хранить настройки не только глобально для всего редактора, но и локально: для выбранной папки или для рабочей области. Однажды я установил какое-то расширение, которое поменяло цвет оформления на болотно-грязный, и потом полдня потратил на то, как его отключить. Оказалось, что цвет прописался в конфигурации папки. :-)
Готовые темы для Visual Studio Code
Здесь всё очень просто: все темы устанавливаются с официального сайта: Marketplace. На странице темы есть ссылка Install , нажав на которую, откроется сам VSCode, где и выбирается установка.
Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.
В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:
- orta.io/vscode-themes — здесь большие скриншоты всех тем на одной странице.
- vscodethemes.com — здесь темы уже сгруппированы на светлые и тёмные, а также доступен предпросмотр для HTML/JS/CSS-кода.
Если тема не понравилась, то её можно удалить во включенных расширениях. Готовые темы удобны тем, что это самый быстрый и простой способ установки — буквально в пару кликов.
Создание своей темы для VSCode
При желании можно создать и свою тему. Для этого нужно воспользоваться он-лайн редактором TmTheme Editor. Вначале лучше выбрать из галереи какой-то подходящий вариант, после его отредактировать. После того, как настройки выполнены, нужно скачать файл (кнопка Download). Это будет файл с расширением .tmTheme.
После этого нужно создать расширение для этой темы. Идём в каталог c:\Users\ЮЗЕР\.vscode\extensions\, где VSCode хранит все установленные расширения. Делаем там каталог «my.themу», в который размещаем файл package.jsonтакого содержания:
{
"name": "My theme",
"version": "1.0.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "MAX",
"contributes": {
"themes": [
{
"label": "MyTheme",
"uiTheme": "vs",
"path": "./themes/my.tmTheme"
}
]
}
}Название, версию можно поменять на свою. Параметр pathуказывает на tmTheme-файл. Его мы скачали с TmTheme Editor — нужно его переименовать в my.tmTheme. Делаем подкаталог themesи кидаем в него этот файл.
Параметр uiThemeуказывает на базовый UI — в данном примере «vs» означает светлую тему. Если вы используется темную, то нужно указать «vs-dark».
После этого в Visual Studio Code переключаемся на вкладку расширений и включаем его.
Если вы решите изменить какой-то цвет в TmTheme Editor, то скачиваете новый файл и заменяете им my.tmTheme. Чтобы изменения вступили в силу, можно выключить расширение и опять его включить.
Свои настройки оформления Visual Studio Code
Лично я предпочитаю светлые темы оформления, хотя тёмные выглядят красивей, поскольку цвет на темном фоне лучше различим. Для меня проблема в том, что приходится постоянно переключаться с редактора на сайт в браузере и мельтешение «тёмное-светлое» довольно сильно раздражает. Поэтому, чтобы не насиловать глаза, я использую светлое оформление.
У готовых светлых тем существенный недостаток — низкий контраст цветов на белом фоне. Из-за этого подобрать нормальный цвет не такое простое занятие. Например многие используют светло-серый цвет текста: выгладит красиво, но для зрения получается слишком малый контраст. Другие, наоборот, ставят насыщенные цвета: синий, красный — для нас они несут ещё и смысловой оттенок, поэтому их нужно подбирать с умом. В общем, если вы такой же капризный как я, :-) то самым лучшим способом будет собственная настройка оформления VSCode. И делается это, на самом деле, достаточно просто.
Общий принцип
Все настройки хранятся как обычно в settings.json. Visual Studio Code разделяет оформление самого редактора от цветовой схемы подсветки кода. Сам редактор настраивается в очень широких пределах — изменить можно буквально каждый элемент дизайна.
В settings.jsonнужно сделать секцию workbench.colorCustomizations, в которой указываются изменяемые параметры. Это «глобальное оформление», которое перекроет оформление любой темы.
Перед тем, как вы начнёте вносить изменения, я бы посоветовал выбрать наиболее подходящую тему и уже после этого вносить свои изменения.
Оформление самого редактора
Я использую стандартную тему оформления Visual Studio Light и секция workbench.colorCustomizationsу меня такая:
...
"workbench.colorCustomizations": {
"foreground": "#000000",
"editor.lineHighlightBackground": "#F0F05D70"
},
...Параметр foregroundзадаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color.
После сохранения settings.jsonизменения сразу же вступают в силу.
«Подводные камни»
Некоторые расширения могут перекрывать ваши настройки. Я столкнулся с тем, что например расширение Git (сейчас это стандартное расширение, доступное в общих настройках), изменяет цвет списка файлов. То есть я указываю цвет #000000, но он принудительно меняет их на малоконтрастный серый. В данном случае Git нашёл существующий репозиторий и решил, что изменения не заcommit'чены. Настройки оформления для Git'а другие (они есть в документации). Поэтому, если какой-то параметр вдруг не работает, то возможно его перебивает какое-то расширение.
Если расширение не нужно, то его можно просто отключить (enable).
Подсветка кода в VSCode
Теперь самое интересное. Для изменения подсветки кода, используется секция editor.tokenColorCustomizations. В ней указывается тема оформления, для которой нужно внести изменения. То есть настройки применятся только, если будет выбрана эта тема.
Покажу на примере:
...
"editor.tokenColorCustomizations": {
"[Visual Studio Light]": {
"textMateRules": [
{
"scope": "entity.name.function.php",
"settings": {
"foreground": "#000000",
"fontStyle": "italic underline"
}
},
{
"scope": "variable.other.php",
"settings": {
"foreground": "#0000BB",
}
},
],
},
},
...Здесь выбрана тема «Visual Studio Light». Секция textMateRulesкак раз и содержит оформление для каждого элемента, который задаётся в параметре scope. Само же оформление задается в параметре settings.
Если оформление для разных элементов одно и тоже, то в scopeможно их перечислить через запятую, например так (здесь два элемента):
{
"scope": "comment.block.documentation.phpdoc.php, comment.line.double-slash.php",
"settings": {
"foreground": "#7c7c7c",
}
},Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию.
Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter.
После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента.
Здесь указывается текущее оформление. Строчка:
entity.name.function.php { "foreground": "#000000" }показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:
entity.name.function.php meta.function-call.php source.php meta.embedded.block.php text.html.php
Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php.
Если нужно изменить элемент, достаточно скопировать его из этой информации и вставить в settings.json. После сохранения файла, изменения будут сразу же видны в коде.
Подсказка. Удобно разделить окна редактора VSCode, чтобы в одном был исходный php-код, а в другом settings.json.Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». :-)
Комментариев: 4 RSS
1Дмитрий13-05-2020 20:49
Спасибо за статью, все в принципе понятно, но не могу изменить цвет фона для PHP зон кода, т.е. чтобы в шаблонах было удобно видеть куски кода, хотел сделать фон для них как в notepad++ - background FEFCF5. Но почему то если делаю так, то получаю такой варинг: Цвет фона маркера сейчас не поддерживается.
"editor.tokenColorCustomizations": { "[Default Light+]": { "textMateRules": [ { "scope": "source.php", "settings": { "background": "#FEFCF5", } }, ], }, }Не подскажешь почему? И кстати команда для Inspect изменилась, сейчас это >Developer: Inspect Editor Tokens and Scopes
2MAX14-05-2020 08:24
Сложно сказать. Может нужно указывать как «textCodeBlock.background» или что-то подобное.
3Serg22-07-2020 23:50
О, классная статья,
но, вопрос: а как определить для конкретного языка(к примеру, Java) его методы, свойства, константы...?
Например, я хотел бы, чтобы при объявлении переменной ключевым словом int, int принимал бы наклонный шрифт. А при вызове функции это ключевое слово было бы жирным.
Ясно, что это делается в scope. А где взять определения спецификаций языка? К примеру, откуда у вас взялось .phpdoc.php
4MAX23-07-2020 09:13
Наверное только через Developer: Inspect TM Scopes, отмечая нужные элементы и потом переносите их «код» свои настройки.