Как да персонализирате Visual Studio Code

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

В този пост първо ще разгледаме как да промените изгледа на работното пространство на Visual Studio Code, тогава ще ви покажа как да персонализирате настройките по подразбиране с помощта на две JSON-форматирани конфигурационни файлове.

Как да зададете цветна тема на VS код

Кодът на Visual Studio ви позволява задайте персонализирана цветна тема за вашия редактор.

За да използвате предварително създадена тема, кликнете върху Файл> Предпочитания> Цвят на темата в горното меню. Когато удариш “Въведете”, Палицата на командите се появява и показва падащ списък от теми, от които можете да избирате.

Можете да постигнете същия ефект, ако натиснете F1 , за да отворите командната палитра и въведете Предпочитания: Цветна тема в полето за въвеждане.

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

Аз избирам “Висок контраст” цветна тема, тъй като очите ми не са най-добри. Ето как изглежда моята гледна точка.

Как да инсталирате тема от VS Code Marketplace

Ако не харесвате някоя от цветовите теми, VS кодът предлага по подразбиране, можете да изтеглите много други от VS Code Marketplace.

Тук можете да разгледате темите, с които разполага Marketplace. Ако искате да инсталирате тема от Marketplace, натиснете F1 в редактора на VS код, за да отворите командната палитра, след това въведете ext install в полето за въвеждане, най-накрая изберете Разширения: Инсталирайте разширението от изскачащия списък.

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

Избирам темата, наречена “Тематичен комплект за материали”, и го инсталирайте, като кликнете върху него. За да имате новата тема в списъка Тема на цветовете, на същото място, където са другите теми по подразбиране, трябва да го направите рестартирайте VS кода. След рестартиране новата тема се появява в списъка с теми и можете да я зададете от командната палитра.

С новата Тема на материала редакторът ми сега изглежда така:

Можете да се върнете към предишната тема (както направих аз, тъй като все още предпочитам тази тема) или можете да играете около още с други теми, за да видите кой е най-подходящият за вас.

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

Промяна на настройките на потребителя и работното пространство

VS кодът не ви позволява само да зададете персонализирана тема, но можете и конфигуриране на много други настройки, правила за форматиране, използване на различни функции, отчети за сривове, настройки за HTTP, асоциации на файлове, правила за маркиране и др..

Можете да направите това, като редактирате два конфигурационни файла, и двата в JSON формат. Не се притеснявайте, не е необходимо да сте професионалист, тъй като VS кодът предлага много лесен и интуитивен начин за бързо добавяне на персонализациите ви.

Първо, нека видим каква е разликата между двата конфигурационни файла. VS кодът има два обхвата (в световен мащаб и местен) за настройките, следователно двата отделни файла:

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

Най- в световен мащаб settings.json файлът може да бъде намерен в папката, където операционната ви система съхранява всякакви други конфигурационни файлове, свързани с приложението, съответно:

• в Windows: % APPDATA% \ Код \ Потребител \ settings.json
• на Linux: $ HOME / .config / код / ​​Потребител / settings.json
• на Mac: $ HOME / Библиотека / Поддръжка на приложения / Код / Потребител / settings.json

Най- работно място, свързано с settings.json файлът се съхранява в папката на текущия ви проект. По подразбиране този файл не съществува, но веднага след като добавите персонализирана настройка на работното пространство, VS кодът създава 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 файл, в който ще бъдат запазени вашите персонализирани конфигурации.