Область редактирования кода в Visual Studio. Как поменять тему в visual studio

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

How to change Visual Studio 2019 Theme

Visual Studio 2019 — одна из лучших интегрированных сред разработки (IDE) для разработчиков, разработанная и поддерживаемая компанией Microsoft. Вы можете использовать Visual Studio для разработки широкого спектра приложений, включая консольные приложения, приложения для Windows, веб-приложения, приложения нового поколения для Интернета вещей и машинного обучения.

На момент написания статьи текущая версия находится в VisualStudio 2019 и доступна в трех вариантах

1. Community Edition : It is a free version and can be downloaded and used by any individual without worrying about licensing issues.
2. Professional Edition: It is a commercial version and is used by an individual or small organization having less than 250 installations or having an annual revenue of 1 Million Dollars or less.
3. Enterprise Edition: It is also a commercial version and is used by large organizations, the enterprise version contains additional features like IntelliTrace, .NET Memory Dump Analyzer, Snapshot Debugger, Live Unit Testing, Code Coverage, Xamarin Inspector and Profiler compared to its peer versions.

How to change the Pre-Installed Visual Studio 2019 theme

Visual Studio 2019 поставляется с предустановленными четырьмя темами: голубой, светлой, темной, синей и сверхконтрастной. Чтобы изменить тему, пользователям необходимо открыть диалог Visual Studio Options. Это можно сделать двумя способами: из диалога пользователь может выбрать цветовую тему по своему усмотрению.

1. Press Control + Q and type “Themes” in the text box and select “Change environment color themes” from the given option. This will open the Options Dialog.

2. откройте меню Сервис и выберите Параметры. Откроется диалог Options, в котором пользователь выбирает узел Environment, выбирает выбранную цветовую тему и нажимает OK.

Snapshot of pre-built themes

1. Blue Theme

Тема синего цвета

2. Light Color

Светлая цветовая тема

3. Dark Color

Темная цветовая тема

4. Blue Extra Contrast

Синяя сверхконтрастная тема

Video Tutorial – Change and Import Themes

Если вы хотите установить внешнюю тему в дополнение к предустановленной, вы можете установить ее прямо из VisualStudio с помощью VisualStudioMarketplace, выполнив следующие простые шаги

Step-1: Select Extensions Menu and Manage Extensions

Темы VisualStudio2019 — меню расширений

В результате откроется диалоговое окно Управление расширениями

Step-2: Select Visual Studio Marketplace under Online Node

Выберите тему VisualStudio2019 — VisualStudioMarketplace

Step-3: Search for Themes and select the theme you want.

VisualStudio2019Themes — Поиск темы

Выберите нужную тему (я выбрал тему One Dark Pro) и нажмите кнопку Загрузить. После загрузки темы VisualStudio запланирует установку при перезагрузке. Просто перезапустите Visual Studio, откроется диалоговое окно VSIX Installer и нажмите кнопку Change для установки темы.

Чтобы продолжить установку темы, нажмите кнопку Изменить

Step-4: Select the installed theme and apply

Если установка завершится успешно, тема будет доступна в опции Цветные темы. Выберите установленную тему и нажмите OK, чтобы применить изменения.

Темы Visual Studio 2019 — выберите установленную тему и нажмите OK

Step-5: Applied Theme Visual Changes

Темы VisualStudio 2019 — внешние приложения тем

Любопытные пользователи могут создать новую тему или изменить существующую визуальную тему с помощью редактора цветовых тем, предоставляемого из загрузки Microsoft DevLabs. В качестве альтернативы можно загрузить ‘Colour Themes’ из загрузки MicrosoftDevLabs.

Посетите Studio Styles, чтобы увидеть более 4000 цветовых тем для VisualStudio!

Надеемся, что наша статья о том, как изменить темы VisualStudio 2019, будет вам полезна. Благодарим вас за визит и надеемся, что вам понравится. Ваше здоровье.

Windows и macOS поддерживают светлые и темные цветовые схемы. Существует параметр window.autoDetectColourScheme, который указывает VSCode прослушивать изменения в цветовой схеме операционной системы и соответственно переходить на соответствующую тему.

Шрифты и цвета

Одними из первых настроек, которые обычно изменяют ведущие программы Visual Studio для улучшения читаемости кода, являются шрифт и цвет области редактирования. Однако так поступают не только ведущие. Вы можете повысить производительность, выбирая шрифты и цвета, которые не утомляют глаза. На следующем рисунке показан узел Шрифты и цвета в диалоговом окне Параметры. Этот узел позволяет настроить шрифт, размер, цвет и стиль различных элементов на экране. Эти узлы в диалоговом окне «Параметры» загружаются долго, поэтому будьте осторожны, чтобы не открыть их по ошибке.

Чтобы изменить визуальное представление определенного текстового элемента в Visual Studio 2013, сначала выберите область IDE, где вы хотите применить новые настройки. Например, на диаграмме выбран элемент Текстовый редактор. Это позволит предварительно настроить элементы, которые будут отображаться в списке «Показать элементы». Выберите нужный элемент в этом каталоге и настройте шрифт и цвет.

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

При выборе шрифта учтите, что аналоговые шрифты обычно программируются не так эффективно, как неаналоговые (также известные как шрифты с одним пробелом). Шрифты с одним пробелом выделены жирным шрифтом, чтобы их было легче найти.

Принципы визуального представления

При редактировании текста Visual Studio 2013 автоматически окрашивает элементы кода в соответствии с типом файла. Например, ключевые слова в коде C# выделяются синим цветом, имена переменных и ссылки на классы — черным, а буквенно-цифровые символы — красным.

Следующая диаграмма иллюстрирует различные особенности визуального представления кода. Читатели, знакомые с языком C#, сразу заметят, что на предыдущей диаграмме нет конца строки, где метод обрабатывает событие Click, связанное с кнопкой. Это происходит потому, что часть линии выходит за границы окна кода. Чтобы увидеть конец этой строки, программисту нужно переместить окно вправо, или использовать навигационные клавиши для перемещения туда курсора, или переместить код на следующую строку, как показано на первом изображении ниже. На следующей иллюстрации показан процесс сворачивания текста, выполненный с помощью диалога Options (Text Editor->All Languages->General Nodes). Опция Показывать визуальные глифы для обводки слов включена. Visual Studio теперь отображает визуальный символ в конце каждой строки, чтобы выделить свернутую строку.

На следующей диаграмме показаны еще две возможности визуального представления кода. Во-первых, слева от указателя блокчейна отображаются номера строк. Эту функцию можно активировать с помощью флажка Номер строки в разделе Wordwrap и VisualGlyphs. Другой вариант — точка, которая указывает на пробелы в тексте кода. В отличие от других визуальных элементов, эта функция может быть активирована из меню Редактирование->Дополнительно->Вид белого, пока область редактирования находится в фокусе.

Полноэкранный режим

Когда у пользователя открыто несколько панелей инструментов и тулбаров, пространство, доступное для редактирования кода, быстро сокращается. По этой причине в Visual Studio 2013 есть полноэкранная функция, которую можно инициировать с помощью команды View->Full Screen. Кроме того, нажмите Shift + Alt + Enter, чтобы включить или выключить полноэкранный режим. На следующей иллюстрации показана верхняя часть системного окна Visual Studio 2013 в полноэкранном режиме. Никаких панелей инструментов или панелей инструментов не видно, а окно открыто как можно шире, чтобы не было видно кнопок. Минимизировать, сбросить и закрыть:.

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

Важно: Изменение цветовой схемы также изменяет размер шрифта. Поэтому рекомендуется выполнять все операции с размером шрифта после выбора цветовой комбинации.

Создание своей темы для VSCode

При необходимости вы можете создать свою собственную тему. Для этого необходимо воспользоваться онлайн-редактором TmTheme. Рекомендуется сначала выбрать подходящий вариант из галереи, а затем отредактировать его. После завершения настройки необходимо загрузить файл (кнопка Download). Это будет файл с расширением .tmTheme.

Затем вам нужно будет создать расширение для этой темы. Перейдите в раздел c: 팀 Пользователи \ Пользователь \ .vscode \ расширяет \. Здесь VSCode сохранит все установленные расширения. Создайте там каталог «my.themu». Здесь разместите файл package.json со следующим содержимым.

Вы можете изменить название и версию на свою. Параметр path указывает на файл tmTheme. Загружается из TmThemeEditor. Вам нужно переименовать его в my.tmTheme. Создайте подкаталог темы и поместите в него этот файл.

Параметр uiTheme указывает на базовый пользовательский интерфейс. В данном примере «vs» означает светлую тему. Если вы используете темную тему, необходимо указать ‘vs-dark’.

Далее в Visual Studio Code перейдите на вкладку Extensions и включите его.

Чтобы изменить цвета в редакторе TmTheme Editor, загрузите новый файл и замените my.tmTheme на этот файл. Чтобы активировать изменения, вы можете отключить расширение, а затем снова включить его.

Свои настройки оформления Visual Studio Code

Лично мне больше нравится дизайн светлой темы, но темная тема выглядит лучше, потому что цвета на темном фоне более четко различимы. Проблема для меня заключается в том, что я постоянно перехожу от автора к странице в браузере, и мерцание «светлого и темного» очень раздражает. Поэтому я использую светлый дизайн, чтобы избежать усталости глаз.

У предварительно освещенных предметов есть один существенный недостаток. Это низкий цветовой контраст белого фона. По этой причине выбор нормального цвета — непростая задача. Например, многие люди используют светло-серый текст. Хотя они выглядят хорошо, контрастность для глаз невелика. С другой стороны, другие добавляют насыщенные цвета: синий, красный — для нас они также имеют значимые оттенки, поэтому выбирать нужно с умом. В общем, если вы такой же непостоянный, как и я :-), то лучший способ — изменить раскладку VSCode. И это на самом деле очень просто.

Общий принцип

Все настройки хранятся, как обычно, в файле settings.json. Код Visual Studio отделяет дизайн самого процессора от цветовых меток в коде. Сам процессор является очень настраиваемым — буквально любой элемент дизайна может быть изменен.

В файле settings.json необходимо создать раздел Workbench.colorcustomisations. Здесь указываются настройки, которые необходимо изменить. Это «мировой план», который обходит любой предметный план.

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

Оформление самого редактора

Я использую тему Visual Studio Light по умолчанию и раздел Workbench.Colourcustomisations.

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

Сохраните файл settings.json, и изменения вступят в силу немедленно.

«Подводные камни»

Некоторые расширения могут обходить эти настройки. Например, мы обнаружили, что расширение Git (в настоящее время это расширение по умолчанию, доступное в общих настройках) изменяет цвета в списке цветов. То есть, он определяет цвет #000000, но превращает их в интенсивно низкоконтрастный серый. В этом случае GIT нашел существующий репозиторий и предположил, что изменения не были обойдены. Настройки макета отличаются для GIT (см. документы). Таким образом, если какое-то правило вдруг не работает, расширение может его обойти.

Если расширение не нужно, просто отключите его.

Подсветка кода в VSCode

Теперь самое интересное. Для изменения меток в коде используются настройки editor.tokencolor. Здесь вы решаете, какой вопрос вы хотите изменить. Поэтому настройки применяются только в том случае, если выбран этот вопрос.

Здесь выбирается тема ‘Visual Studio Light’. Раздел TextMateules содержит внешний вид каждого элемента, определенный в параметре scope. Сами декорации определяются в параметрах конфигурации.

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

Поскольку существует так много предопределенных элементов и даже связанных с одним языком, код Visual Studio предоставляет готовый инструмент и инспектирует область видимости TM для отображения всей необходимой информации.

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

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

В коде VS можно многое настроить под свои нужды. Изменяйте внешний вид процессора и автоматизируйте действия.

Выберите предпочтительную комбинацию цветов. Процессор по умолчанию имеет темную тему. Нажмите Ctrl + K или Ctrl + T, чтобы изменить его. Если 14 тем по умолчанию недостаточно, введите тему в разделе Plugins и выберите подходящую тему.

Изменение настроек

Все значения по умолчанию в Code VS перечислены в формате JSON. Чтобы обойти их, необходимо создать файл settings.json и указать настройки, которые вы хотите изменить. Для этого нажмите Ctrl +. В левой части вы найдете все настройки по умолчанию и объяснение, зачем они нужны. С правой стороны находятся две вкладки: одна для пользовательских настроек, другая — для настроек конкретного рабочего пространства. Чтобы изменить значения по умолчанию, просто нажмите на значок карандаша справа от настроек.

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

• Настройки редактирования.
  • Размер шрифта. «editor.fontSize»: 14
  • Размер таба. «editor.tabSize»: 4
  • Шрифт. «editor.fontFamily»: «Consolas, ‘Courier New’, monospace»
  • Перенос слов. «editor.wordWrap»: «on»

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

  По умолчанию файлы сохраняются только по запросу пользователя. Это поведение можно изменить, включив автоматическое сохранение файлов. Также можно установить задержку после ввода перед автоматическим сохранением. Значение записывается в миллисекундах.

  • Размер шрифта. «terminal.integrated.fontSize»: 14
  • Выбор терминала. «terminal.integrated.shell.windows»: «C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe»
  • Тип курсора. «terminal.integrated.cursorStyle»: «line»

  Все настройки, связанные с терминалом, можно найти в разделе ‘Полный терминал’. Например, можно изменять внешний вид курсора блок за блоком.

  Создание задач

  Я покажу на конкретном примере, почему им нужна эта задача. команду, чтобы запустить сайт локально.

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

  Однако это не очень хорошо автоматизирует процесс. Чтобы выполнить это задание, необходимо открыть командную строку и найти его среди других команд. Чтобы запустить задание кнопки, откройте файл keybindings.json (Командная строка: Настройки. Open keyboard shortcut file) и добавьте необходимые комбинации клавиш.

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