Как настроить оформление Visual Studio Code
В 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 можно их перечислить через запятую, например так (здесь два элемента):
Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию. Для начала загрузите любой файл, например PHP (как в моих примерах). После этого нажмите F1 (открется панель команд) и в неё наберите Developer: Inspect TM Scopes и после нажмите Enter . 
После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента. 
Здесь указывается текущее оформление. Строчка:
entity.name.function.php
показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:
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
В общем при гуглении различных тем для изменения внешнего вида IDE (пример ниже на фото, но это вроде Atom или Visual Code) в интернете можно найти только различные темы для Visual Studio Code. Знаю, что можно вручную устанавливать различные цвета для текста, но можно ли в VS менять разные темы (кроме светлой и темной) так же автоматически, как в VSCode или Atom и если да, то где их найти и как установить? P.S. Если не совсем понятно что за темы для VSCode то вот пример сайта с ними — vscodethemes.com
Отслеживать
задан 4 апр 2022 в 15:38
449 2 2 серебряных знака 14 14 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Нажмите на кнопку «Средства», потом «Параметры», потом выберите тему, которая Вам нравится.
Отслеживать
ответ дан 4 апр 2022 в 15:48
Alex_Programmer_WPF Alex_Programmer_WPF
1 2 2 бронзовых знака
.. можно ли в VS менять разные темы (кроме светлой и темной. ) .
4 апр 2022 в 16:02
Да. Там кроме темной и светлой темы есть синяя и синий (дополнительный контраст)
4 апр 2022 в 16:05
отредактировал вопрос чтобы было понятно
4 апр 2022 в 16:07
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.3.372
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Программирование на C, C# и Java
Уроки программирования, алгоритмы, статьи, исходники, примеры программ и полезные советы
ОСТОРОЖНО МОШЕННИКИ! В последнее время в социальных сетях участились случаи предложения помощи в написании программ от лиц, прикрывающихся сайтом vscode.ru. Мы никогда не пишем первыми и не размещаем никакие материалы в посторонних группах ВК. Для связи с нами используйте исключительно эти контакты: vscoderu@yandex.ru, https://vk.com/vscode
Поменять тему в Visual Studio
Ознакомившись с этим материалом, вы узнаете как поменять тему в Visual Studio.
Для того, чтобы изменить фон в Visual Studio (в версиях 2013, 2015), необходимо в строке меню нажать кнопку «Сервис», затем выбрать пункт «Параметры».
В появившемся окне «Параметры» нажать на группу «Общие» (слева) и в выпадающем списке «Цветовая тема» (справа) выбрать нужную тему: «Светлую», «Синюю» или «Темную».
Для завершения нажмите кнопку «ОК». Готово!
Как поменять тему в vs code
Когда люди пишут инструкции — они такие скучные и непонятные, в которых еще нужно и разбираться! У нас все просто!
Открываем программу VS Code.
Идем — файл — параметры — цветовая тема:
Нажмите, чтобы открыть в новом окне.
В новом окне выбираем тему. список тем слева, просто кликайте оп названию темы — она установится автоматически. справа строка прокрутки.
Если тем не хватило, то можно перейти по ссылке внизу ссылки.
Нажмите, чтобы открыть в новом окне.
Горячие клавиши сменить тему на «Visual Studio Code«?
Для быстрого доступа к новым темам и смены тем в «Visual Studio Code» есть горячие клавиши.
Не буду повторять тот путь, что уже выше проделывали.
Нажмите, чтобы открыть в новом окне.
Быстрая смена тем на «Visual Studio Code«
Быстрая смена тем на «Visual Studio Code» происходит по нажатию клавиш «ctrl + K ctrl + T»
ctrl + K ctrl + T Как нажимать!?
Зажали клавишу ctrl(не отпускаем. ) — далее K и далее T
Как поставить светлую тему «Visual Studio Code«?
Как мы уже выше выяснили, быстрый доступ к темам. нажимаем:
ctrl + K ctrl + T В окне, смотрим, есть строчка — «светлые темы», либо просто выбираем светлую тему, либо слева есть несколько светлых тем для Visual Studio Code«.
Нажмите, чтобы открыть в новом окне.
Как поставить темную тему «Visual Studio Code«?
Если вам нужно поставить темную тему в «Visual Studio Code«, то проделываем аналогичные действия.
ctrl + K ctrl + T
И далее выбираем темную тему
Нажмите, чтобы открыть в новом окне.
Загрузить сторонние темы «Visual Studio Code«?
Если вам вдруг. не хватило перечисленных тем, то можно загрузить сторонние темы.
ctrl + K ctrl + T
Установить дополнительные цветовые темы.
Слева открываем строку поиска нажав по кнопке «extensions»(ctrl + shift + X)
В строке вводим:
Выбор сторонне темы «Visual Studio Code«?
И в двух случаях попадаем в одно и то же место:
Я пытался я прокрутить до самого низа. когда кончится список сторонних тем . но у меня не получилось — может у вас получится!?