Как сменить цвет дизайна visual studio

Как в Visual Studio 2017 поменять цвет полей класса

Как в Visual Studio 2017 поменять подсветку цвета идентификаторов полей класса для проектов С#? Для проектов на С++ есть отдельная опция для изменения цвета (второй скрин), для C# такую опцию не могу найти.

Отслеживать
Anastasiia Melnyk
задан 18 апр 2018 в 13:52
Anastasiia Melnyk Anastasiia Melnyk
1,271 12 12 серебряных знаков 20 20 бронзовых знаков
А не могли бы вы предоставить скрин того, что хотите изменить?
18 апр 2018 в 14:33

Все цвета в студии меняются в «Параметры» -> «Шрифты и цвета». Конкретно то, что вы выделили называется «Идентификатор».

18 апр 2018 в 15:27
@EvgeniyZ, ответы — в ответы
18 апр 2018 в 15:38

@АндрейNOP Я не считаю это ответом, ибо я не знаю что именно хочет автор. Данная настройка меняет почти все имена в коде на указанный цвет, а не только то, что выделено на скрине. По этому я не могу считать это ответом. Это больше скажем так наводка, нежели ответ.

18 апр 2018 в 15:41

@EvgeniyZ, любой ответ лучше чем никакого, вопрос без ответа будет бесконечно подниматься Духом и засорять ленту.

18 апр 2018 в 15:43

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Стандартное решение

Для изменения цветов в Visual Studio существует специальный раздел «Шрифты и цвета». Находится он в «Среда» -> «Параметры» -> «Окружение» -> «Шрифты и цвета».

К примеру, хотим мы изменить указанный вами текст на красный:

• В «Шрифты и цвета» выбираем в выпадающем списке «Текстовый редактор».
• Ищем в нижнем списке «Идентификатор».
• Сбоку от списка есть настройки цвета, а также опции для изменения шрифта. К примеру в «Основной цвет элемента» выбираем «Красный».
• Жмем кнопку ОК.

p.s. Но тут одно но! Стандартно студия для языка c# покрасит вам все названия в один цвет (будь они локальные или нет).

Решение на основе ReSharper

• Для начала активируем опцию, которая переключит цвета в редакторе на те, что предоставляет ReSharper. Для этого заходим в настойки ReSharper «Code Inspector» -> «Settings» -> «Color identifiers».

• Далее идем в уже знакомые нам настройки студии, в раздел «Шрифты и цвета».
• Нас интересует «ReSharper Field Identifier», ставим ей текст на красный.

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

Как настроить оформление 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 Code: установка, настройка, русификация и список горячих клавиш

Всё, что нужно знать о самом популярном редакторе кода от Microsoft.

Иллюстрация: Image by Freepik / Freepik / Rawpixel / Annie для Skillbox Media

Даниил Шатухин

Автор статей о программировании, технологиях и гаджетах. Пишет код на JavaScript и Python. Любит веб-технологии, модные приложения и магию Apple.

В этой статье мы расскажем, как установить Visual Studio Code (VS Code) и настроить его для комфортной работы. А также подробно рассмотрим графический интерфейс и приведём список незаменимых горячих клавиш.

Содержание

• Что такое Visual Studio Code
• Где скачать и как установить редактор кода
• Русификация
• Настройка
• Интерфейс программы
• Кастомизация
• Плагины
• Горячие клавиши
• Полезные ссылки

Что такое Visual Studio Code

Visual Studio Code (VS Code) — это кросс-платформенный редактор кода от компании Microsoft, разработанный на базе фреймворка Electron. С его помощью можно разрабатывать кросс-платформенные десктопные приложения, используя веб-технологии.

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

Возможности VS Code:

• Подсветка синтаксиса — функции, классы, переменные и другие сущности выделяются разными цветами.
• Автоматическое дополнение — если начать что-то писать, редактор предложит варианты завершения строки.
• Контроль версий — поддерживаются интеграции с GitHub, GitLens и другими похожими сервисами.
• Отладка — редактор подсвечивает ошибки и предлагает исправления. Вместе с этим поддерживается и полноценный режим отладки кода. К примеру, для проекта на Python его можно запустить клавишей F5, а для JavaScript запустится новое окно браузера.
• Рефакторинг — редактор кода выводит советы для улучшения кода и повышения производительности, подсказывая, какие конструкции можно заменить.

Запускать VS Code можно даже на слабых компьютерах. Редактор работает на машинах с 1 ГБ оперативной памяти и процессором с частотой от 1,6 ГГц. Приятная особенность VS Code в том, что он абсолютно бесплатный.

Где скачать и как установить редактор кода

VS Code — кросс-платформенный редактор. Его можно установить на Windows, macOS и Linux. Ещё есть веб-версия, в которой можно редактировать файлы, когда нет возможности запустить полноценное приложение.

Ниже описан порядок установки VS Code на разные операционные системы.

Установка в macOS

• Скачать установочный файл.
• Открыть папку с загрузками и найти скачанный архив.
• Извлечь содержимое и запустить приложение.
• Перетащить Visual Studio Code.app в папку Программы.
• Теперь приложение можно запускать из меню приложений.

Установка в Windows

• Скачать установщик.
• Открыть загрузки и найти скачанный файл.
• Запустить двойным кликом VSCodeUserSetup-version>.exe.
• По умолчанию приложение появится в папке Programs\Microsoft\VS Code.

Установка в Linux

• Скачать установщик, подходящий к дистрибутиву.
• Запустить файл и следовать инструкции.

Веб-приложение

Веб-версия VS Code находится по адресу vscode.dev. С её помощью можно изменять локальные файлы с компьютера, открывать удалённые репозитории, устанавливать некоторые расширения и сохранять результат работы на диск компьютера. VS Code запускается даже в мобильных браузерах, но у смартфонов довольно маленькие экраны, поэтому работать на них неудобно.

У веб-версии Visual Studio Code есть ряд ограничений. К примеру, вы не сможете воспользоваться терминалом и запустить программы на некоторых языках, среди которых Go и Rust.

Русификация

По умолчанию интерфейс VS Code англоязычный, но язык можно заменить на русский или любой другой. Для этого нужно скачать дополнительный языковой пакет и выбрать его в параметрах приложения. Как поменять язык VS Code на русский:

• Открыть палитру команд с помощью сочетания клавиш Ctrl + Shift + P или ⇧ + ⌘ + P на macOS.
• Ввести команду Configure Display Language и нажать Enter.
• Найти в списке русский язык и выбрать его.
• Перезапустить приложение.

Предупреждение!

Есть несколько причин, по которым не стоит русифицировать Visual Studio Code. Во-первых, большая часть видеоуроков и статей написана на английском. Поэтому во время обучения придётся переводить названия элементов интерфейса. Во-вторых, описание и решение многих ошибок, которые будут возникать в процессе разработки, тоже написаны на английском.

Настройка VS Code

Visual Studio Code можно полностью подстраивать под рабочие задачи, меняя как параметры самой программы, так и установленные плагины. Меню со всеми настройками можно найти в File → Preferences → Settings на Windows/Linux и в Code → Preferences → Settings на macOS.

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

Автоматическое сохранение. По умолчанию VS Code сохраняет изменения в файле только после нажатия сочетания клавиш Ctrl + S / ⌘ + S. Но можно сделать так, чтобы код автоматически сохранялся после определённых действий. Для этого надо перейти в меню настроек и в поле поиска ввести Auto Save.

По умолчанию параметр установлен в off, но есть и другие значения:

• afterDelay — файл сохраняется после задержки в миллисекундах, которую можно установить ниже.
• onfocusChange — сохранение происходит после переключения на другой файл.
• onWindowChange — файл сохраняется при переходе в окно другой программы.

Семейство шрифта и кегль. Стандартный шрифт очень мелкий, что сильно нагружает глаза при долгой работе с кодом. Поэтому лучше сразу подобрать оптимальные настройки. Сделать это можно в разделе «Шрифт». Параметр Font Family отвечает за семейство шрифта, а Font Size — за его размер. На широкоформатных мониторах лучше выбирать шрифт побольше.

Форматирование. Структуры в программном коде разделяются пробелами и отступами для более удобного чтения. Но если скопировать фрагмент кода и вставить его, то все отступы могут съехать. По умолчанию VS Code выравнивает их, только если нажать сочетание клавиш Shift + Alt + F / ⇧ + ⌥ + F. Но можно автоматизировать это.

Для этого в настройках переходим к разделу «Форматирование» и выбираем подходящий режим работы:

• Format On Paste — форматирование применяется автоматически при вставке кода.
• Format On Save — код форматируется во время сохранения.
• Format On Type — форматирование применяется при наборе кода.

Обзор интерфейса

Интерфейс программы состоит из нескольких основных частей: окно редактора, карты кода, вкладок, статус-бара и иконок управления. Доступ к остальным функциям можно получить через настройки или системное меню VS Code.

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

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

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

Внизу находится статус-бар с дополнительной информацией о документе: какой язык используется, количество ошибок, имя активной Git-ветки, кодировка и статус работы некоторых плагинов (например, Live Server).

Слева от редактора находится окно инструментов со следующими разделами и функциями:

• Проводник — выводит все папки и файлы проекта. Их можно открывать двойным кликом.
• Поиск — позволяет искать все вхождения слова в файле. С его помощью можно найти строки исходника, в которых используется переменная или функция.
• Git и GitHub — тут можно отслеживать историю изменений, переключаться между ветками Git и синхронизировать обновления проекта с удалённым репозиторием.
• Запуск кода — VS Code позволяет запускать код, как в профессиональной IDE. Для каждого языка необходимо настроить параметры запуска.
• Расширения — это большой магазин плагинов, тем и языковых пакетов. В нём можно управлять установленными расширениями и искать новые.
• Тестирование — в этом окне удобно запускать тесты и подключать фреймворки для тестирования.

Ниже могут быть и другие иконки, их наличие зависит от установленных плагинов. К примеру, с помощью PlatformIO можно управлять инструментами для разработки под микроконтроллеры, а если через плагин Docker — контейнерами.

Справа от иконок есть поле, в которое выводятся элементы управления выбранным инструментом. Если выбрать «Проводник», то в окне появится список файлов.

Кастомизация

Пользователи Visual Studio Code могут менять оформление интерфейса с помощью сторонних цветовых схем. Вот как установить новую тему:

• Перейти в меню Расширения.
• Кликнуть на иконку фильтрации и выбрать Категория → Темы.
• В открывшемся списке можно выбрать и установить понравившееся оформление.

Как изменить тему в VS Code:

С помощью стрелок выбрать в списке нужную тему и нажать Enter.

Плагины

VS Code — своеобразный швейцарский нож для разработчиков, возможности которого можно расширять с помощью плагинов. Часть из них выпускает Microsoft, но есть решения и от сторонних разработчиков.

Все плагины можно условно разделить на полезные и забавные. Первые помогают добавить в VS Code новые функции и поддержку дополнительных языков программирования. Так, для Python есть одноимённый плагин, который содержит линтеры, инструменты рефакторинга и правила подсветки синтаксиса. А если установить GitHub Copilot, то у вас появится собственный ИИ-помощник.

Вторая группа плагинов просто добавляет в VS Code что-то весёлое или милое. К примеру, VS Code Pets позволяет завести в пиксельного питомца прямо в окне редактора, а Power Mode отображает рядом с курсором фейерверк, если долго печатать без остановки. Больше таких плагинов можно найти в специальном маркетплейсе.

Горячие клавиши

В VS Code очень много инструментов и функций. Если для их активации пользоваться только мышкой, то довольно много времени будет уходить на навигацию и поиск нужных кнопок. Для ускорения рабочего процесса в Visual Studio Code поддерживаются горячие клавиши.

Полный список сочетаний клавиш для быстрого доступа к функциям можно узнать в File → Preferences → Keyboard Shortcuts на Windows/Linux или в Code → Preferences → Keyboard Shortcuts на macOS. В этом же окне можно настроить собственные горячие клавиши или переназначить базовые.

Некоторые полезные сочетания, которые разработчики часто используют:

Ctrl + S / ⌘ + S	Сохранить
Ctrl + O / ⌘ + O	Открыть файл
Ctrl + N / ⌘ + N	Создать новый файл
Ctrl + P / ⌘ + P	Перейти к файлу по названию
Ctrl + / / ⌘ + /	Закомментировать выделение
Ctrl + F / ⌘ + F	Поиск в файле по слову
Ctrl + Shift + N / ⌘ + ⇧ + N	Открыть новое окно
Ctrl + Shift + P / ⌘ + ⇧ + P	Открыть палитру команд
Ctrl + Shift + S / ⌘ + ⇧ + S	Сохранить как

Полезные ссылки

• Официальная документация Visual Studio Code
• Магазин расширений
• Магазин тем
• Руководство по разработке и публикации собственной темы
• Видео о настройке VS Code для продуктивной работы от freeCodeCamp
• Таблицы со всеми горячими клавишами для Windows, macOS и Linux
• Урок по созданию своего расширения с помощью JavaScript

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Как в Visual Studio Code изменить подсветку выделения в теме?

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

• Вопрос задан более трёх лет назад
• 2217 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

Mark-Centurion @Mark-Centurion

Первой строкой отключаешь бесячее выделение слова. остальными строками настраиваешь выделение под себя.

«editor.occurrencesHighlight»: false, // отключает обведение слова в рамку при постановке в него курсора
«workbench.colorCustomizations»: «editor.selectionBackground»: «#5555fcb0», // Текущий выделенный текст
«editor.selectionHighlightBackground»: «#00000000», // тот же контент, что и выделение
«editor.selectionHighlightBorder»: «#ffffff46», // обводка того же контента, что и выделение
>,

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Есть две настройки в settings.json:

«editor.findMatchHighlightBackground»: «#787878»,
и
«editor.lineHighlightBackground»: «#2d2b2e»,

Ответ написан более трёх лет назад
Нравится 1 1 комментарий

Александр @Captain Автор вопроса

Спасибо. Вроде бы «да, но нет». Вот я в поиске что-то вбиваю и все эти найденные фрагменты подсвечиваются. Или выделяю что-то и все аналогичные слова подсвечиваются. Начинаю в этом фрагменте что-то выделять, меняется цвет выделения всего найденного фрагмента. И я опять не вижу текущее выделение.
А настройки указанные применил — стало лучше. Но вот эта проблема осталась.