Як налаштувати код Visual Studio

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

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

Як встановити колірну тему на код VS

Код Visual Studio дозволяє вам встановити власну кольорову тему для вашого редактора.

Щоб використати попередньо зроблену тему, натисніть кнопку Файл> Параметри> Тема кольору меню у верхньому рядку меню. Коли ви потрапили “Enter”, Панель команд вискочить і відображає випадаючий список тем, з яких ви можете вибрати.

Цей ефект можна досягти, якщо натиснути F1 , щоб відкрити Палітру команд, і введіть Налаштування: Тема кольору у поле введення.

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

Я вибираю “Високий контраст” кольорова тема, так як мої очі не найкращі. Ось як виглядає моя точка зору.

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

Якщо вам не подобається жодна з кольорових тем VS Code за замовчуванням, ви можете завантажити багато інших з VS Code Marketplace.

Тут ви можете ознайомитися з темами, які зараз має Marketplace. Якщо потрібно встановити тему з Marketplace, натисніть F1 праворуч у редакторі коду VS, щоб відкрити панель команд, а потім введіть ext install команду в поле введення, нарешті, виберіть Розширення: інсталяція розширення з списку, який з'явиться.

Коли ви натискаєте цю опцію, з'явиться новий екземпляр палітри команд. Введіть "Встановити тему ext" команду в нове поле введення, і ви будете отримати список усіх тем , які доступні у VS Code Marketplace.

Я вибираю тему, що називається “Комплект матеріалу теми”, і встановіть його, натиснувши на нього. Щоб мати нову тему у списку "Тема кольорів", там, де є інші теми за замовчуванням, вам потрібно перезапустити код VS. Після перезавантаження нова тема з'являється у списку тем, і ви можете встановити її з Панелі команд.

З новою темою матеріалу мій редактор тепер виглядає так:

Ви можете повернутися до попередньої теми (як я це зробив, тому що я все ще віддаю перевагу цій темі), або ви можете зіграти більше з іншими темами, щоб побачити, який саме вам підходить.

Якщо хочете, ви також можете створити власну тему, і опублікувати його на VS Code Marketplace за допомогою інструмента керування розширеннями vsce.

Змінити налаштування користувача та робочої області

Код VS не тільки дозволяє встановлювати власну тему, але також можна налаштувати багато інших параметрів, такі як правила форматування, використання різних функцій, звіти про аварійне завершення роботи, налаштування HTTP, асоціації файлів, правила linting та інше.

Ви можете зробити це, відредагувавши два файли конфігурації, як у форматі JSON. Не хвилюйтеся, вам не потрібно бути професіоналом, оскільки VS-код пропонує досить простий і інтуїтивно зрозумілий спосіб швидко додати свої налаштування.

Спочатку подивимося, в чому полягає різниця між двома файлами конфігурації. Код VS має два області (глобальний і місцеві) для налаштувань, отже, двох окремих файлів:

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

The глобальний settings.json файл можна знайти в папці, в якій ваша операційна система зберігає всі інші конфігураційні файли, пов'язані з програмою, відповідно:

• у Windows: % APPDATA% Код користувача.json
• на Linux: $ HOME / .config / Код / Користувач / settings.json
• на Mac: $ HOME / Бібліотека / Підтримка додатків / Код / Користувач / settings.json

The пов'язані з робочою зоною settings.json Файл зберігається в папці поточного проекту. За промовчанням цей файл не існує, але як тільки ви додасте власне налаштування робочої області, VS Code створює a .vscode / settings.json файли одночасно, і в неї вбудовуються спеціальні конфігурації, специфічні для робочої області.

Отже, коли ви використовуєте settings.json файлів?

Якщо ви хочете, щоб код VS використовував ваші власні правила конфігурації в все Ваші проекти, покласти їх у глобальне settings.json файл.

Якщо ви бажаєте, щоб ваші налаштування були дійсними лише у вашій поточний проект, розмістити їх у робочому просторі settings.json файл.

Налаштування робочої області перекривають загальні налаштування, так що будьте обережні.

Закликаються глобальні налаштування “Налаштування користувача” у коді VS. Відкрийте їх, натиснувши на Файл> Параметри> Параметри користувача або, починаючи з введенням виразу “Налаштування користувача” в палітру команд (відкрийте її за допомогою F1).

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

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

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

Після копіювання, мій глобальний settings.json Файл виглядає так:

 // Розмістіть налаштування в цьому файлі, щоб перезаписати налаштування за замовчуванням "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "увага" 

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

Параметри робочого простору можна змінити так само. Тепер потрібно натиснути на кнопку Файл> Параметри> Налаштування робочого середовища у верхньому рядку меню, щоб отримати доступ до пов'язаної з робочою зоною .vscode / settings.json файл.

Налаштування робочої області мають точно такі ж параметри конфігурації, як і настройки користувача, і ви можете використовувати ту ж саму техніку копіювання. Є тільки дві відмінності, сфера (локальна, а не глобальна), і settings.json файл, в який будуть збережені власні конфігурації.