Как настроить код Visual Studio

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

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

Чтобы использовать готовую тему, нажмите меню «Файл»> «Настройки»> «Цветовая тема» в верхней строке меню. Когда вы нажимаете «Enter», появляется командная палитра, и отображается раскрывающийся список тем, из которых вы можете выбрать.

Вы можете добиться того же эффекта, если нажмете клавишу F1, чтобы открыть палитру команд, и введите команду «Предпочтения: Цветовая тема» в поле ввода.

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

Я выбираю цветовую тему «Высокая контрастность», так как мои глаза не самые лучшие. Вот как выглядит мой взгляд.
Как установить тему из VS Code Marketplace
Если вам не нравятся какие-либо цветовые темы, предлагаемые VS Code по умолчанию, вы можете загрузить множество других с VS Code Marketplace,

Вот Вы можете взглянуть на темы, которые есть на Marketplace. Если вы хотите установить тему из Marketplace, нажмите F1 прямо в редакторе кода VS, чтобы открыть палитру команд, затем введите команду ext install в поле ввода и, наконец, выберите в списке пункт Расширения: установить расширение. всплывает.
Когда вы нажимаете эту опцию, появляется новый экземпляр командной палитры. Введите команду «ext install theme» в новое поле ввода, и вы получите список всех тем, доступных на VS Code Marketplace.
Я выбираю тему «Material Theme Kit» и устанавливаю ее, нажимая на нее. Чтобы новая тема появилась в списке «Цветовая тема» там же, где и другие темы по умолчанию, необходимо перезапустить VS Code. После перезапуска новая тема появится в списке тем, и вы можете установить ее из командной палитры.

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

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

Вы можете сделать это, отредактировав два файла конфигурации, оба в JSON формат. Не беспокойтесь, вам не нужно быть профессионалом, поскольку VS Code предлагает довольно простой и интуитивно понятный способ быстрого добавления ваших настроек.

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

1. глобальный settings.json, в котором правила конфигурации действительны для каждого рабочего пространства
2. связанный с рабочим пространством .vscode / settings.json, который связан только с отдельным рабочим пространством

Глобальный файл settings.json можно найти в папке, где ваша операционная система хранит все остальные файлы конфигурации, связанные с приложением, соответственно:

• в Windows:% APPDATA% Code User settings.json
• в Linux: $ HOME / .config / Code / User / settings.json
• на Mac: $ HOME / Библиотека / Поддержка приложений / Код / Пользователь / settings.json

Файл settings.json, связанный с рабочей областью, хранится в папке вашего текущего проекта. По умолчанию этот файл не существует, но как только вы добавите пользовательский параметр рабочего пространства, VS Code сразу создаст файл .vscode / settings.json и поместит в него пользовательские конфигурации, специфичные для рабочего пространства.

Так когда вы используете файлы settings.json?

Если вы хотите, чтобы VS Code использовал ваши собственные правила конфигурации в все ваши проекты, поместите их в глобальный файл settings.json.

Если вы хотите, чтобы ваши настройки действовали только в вашем текущий проектпоместите их в файл settings.json, связанный с рабочей областью.

Настройки рабочего пространства переопределяют глобальные настройки, поэтому будьте осторожны.

Глобальные настройки называются «Настройки пользователя» в VS Code. Откройте их, нажав в меню «Файл»> «Настройки»> «Настройки пользователя», или начав вводить выражение «Настройки пользователя» в палитре команд (откройте его с помощью клавиши F1).

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

Давайте рассмотрим короткий пример (но вы можете внести любые другие изменения в соответствии с вашими индивидуальными потребностями). Я изменю семейство шрифтов, уменьшу длину вкладки с четырех пробелов по умолчанию до двух, уменьшу максимальное количество рабочих файлов с девяти до пяти и изменю одно из правил обработки CSS для дублирующих стилей с “игнорировать” на ” предупреждение”.

После копирования-копирования мой глобальный файл settings.json выглядит следующим образом:

// Поместите ваши настройки в этот файл, чтобы перезаписать настройки по умолчанию
{
  “editor.fontFamily”: “Новый курьер”,
  “editor.tabSize”: 2,
  “explorer.workingFiles.maxVisible”: 5,
  “css.lint.duplicateProperties”: “предупреждение”
}
После сохранения измененного файла settings.json внешний вид моего редактора сразу меняется (на скриншоте ниже видно только изменение семейства шрифтов):
Вы можете изменить настройки рабочего пространства аналогичным образом. Теперь вам нужно нажать на Файл> Настройки> Настройки рабочего пространства в верхней строке меню, чтобы получить доступ к рабочему пространству .vscode / settings.json.

Параметры рабочего пространства имеют те же параметры конфигурации, что и параметры пользователя, и вы можете использовать тот же метод вставки копий. Существует только два различия: область (локальная вместо глобальной) и файл settings.json, в который будут сохраняться ваши пользовательские конфигурации.