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

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

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

Как установить цветовую тему в VS Code

Visual Studio Code позволяет вам установить собственную цветовую тему для вашего редактора.

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

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

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

Я выбираю “Высокий контраст” Цветная тема, так как мои глаза не самые лучшие. Вот как выглядит мой взгляд.

Как установить тему из VS Code Marketplace

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

Здесь вы можете взглянуть на темы, которые Marketplace имеет в настоящее время. Если вы хотите установить тему из Marketplace, нажмите F1 прямо в редакторе кода VS, чтобы открыть палитру команд, а затем введите внешняя установка в поле ввода, наконец, выберите Расширения: установить расширение вариант из всплывающего списка.

Когда вы нажимаете на эту опцию, появляется новый экземпляр командной палитры. Введите "ext install theme" введите новое поле ввода, и вы получить список всех тем которые доступны на VS Code Marketplace.

Я выбираю тему под названием “Материал Тематический комплект”, и установите его, нажав на него. Чтобы иметь новую тему в списке «Цветовая тема» там же, где и другие темы по умолчанию, необходимо перезапустите 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 / Код / Пользователь / settings.json
• на Mac: $ HOME / Библиотека / Поддержка приложений / Код / Пользователь / settings.json

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

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

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

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

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

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

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

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

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

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

 // Поместите ваши настройки в этот файл, чтобы перезаписать настройки по умолчанию "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "предупреждение"

После сохранения измененного settings.json файл, внешний вид моего редактора меняется сразу (на скриншоте ниже видно только изменение семейства шрифтов):

Вы можете изменить настройки рабочего пространства аналогичным образом. Теперь вам нужно нажать на Файл> Настройки> Настройки рабочего пространства в верхней строке меню для доступа к рабочему пространству .vscode / settings.json файл.

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