Как да форматирате автоматично код във VS Code

Ако мислите да се научите да кодирате или вече го пишете всеки ден, надежден редактор на код, като Visual Studio Code, е задължителен. Докато пишете код, трябва да мислите за форматирането, тъй като това улеснява хората да го четат.

Всички тези специфични правила относно отстъпите и разстоянието между редовете са от съществено значение, но също така лесно се забравят, докато се съсредоточавате върху работата си.

Ето защо VS Code ви позволява да използвате разширения за автоматично форматиране, които могат да ви помогнат по пътя. Някои разширения за автоматично форматиране могат да форматират повече от един език за програмиране, докато за други ще трябва да интегрирате специализирани разширения.

Как да форматирате автоматично HTML

Hyper Text Markup Language или HTML е език за кодиране, използван за създаване и показване на уеб страници. Уеб разработчиците и софтуерните инженери използват HTML всеки ден и могат да се възползват от инструмент за автоматично форматиране.

Ако избраният от вас редактор на код е VS Code, ето как можете да намерите Prettier, популярен инструмент за форматиране на код, и да включите функцията за автоматично форматиране.

1. Отворете Visual Studio Code на вашия компютър.
   
2. Придвижете се до раздела за разширение от лявата страна на екрана. Представен е като четири блока.
   
3. В полето на лентата за търсене въведете „Prettier code formatter“.
   
4. Ще получите множество резултати от търсенето, но изберете този, който е направен от Prettier, а не от друго лице или компания.
   
5. Щракнете върху бутона „Инсталиране“ и разширението ще се изтегли след секунди.
   

След като инсталирате инструмента за форматиране Prettier, можете да включите функцията за автоматично форматиране и да осигурите последователен стил, докато пишете код.

1. Отворете или създайте нов HTML файл във VS Code.
   
2. Отидете на „Настройки“, разположени в долния ляв ъгъл на екрана.
   
3. Въведете „Форматиране“ в полето за търсене и превключете към раздела „Потребител“.
   
4. Щракнете върху опцията „Форматиране по подразбиране“ и изберете „По-красиво“ от списъка.
   
5. Превъртете малко надолу, докато видите опцията „Редактор: Форматиране при запазване“.
   
6. Поставете отметка в квадратчето до тази опция.
   
7. Върнете се към вашия файл и проверете дали настройката работи.

Prettier трябва автоматично да форматира вашите HTML файлове, докато ги записвате.

Автоматично форматиране на JSON

JavaScript Object Notation или JSON се класифицира като независим от езика формат за обмен на данни. Мобилните приложения и компютърните програми използват JSON файлове, за да четат данни от сървърите и да ги показват на екрана.

Когато създавате JSON файл в редактора на Visual Studio Code, трябва да имате предвид и форматирането. Добрата новина е, че можете да използвате разширенията за форматиране на Prettier във VS Code, за да наложите последователен стил на вашите JSON файлове.

Ето всичко, което трябва да направите, за да включите функцията за автоматично форматиране за JSON файлове.

1. Стартирайте VS Code и отидете до обозначения раздел с разширения от лявата страна на прозореца.
   
2. Потърсете „Prettier code formatter“ в полето за търсене.
   
3. Първият резултат обикновено е този, върху който искате да щракнете. Въпреки това, за да сте сигурни, изберете този, който има „Prettier“ в списъка като разработчик.
   
4. Щракнете върху „Инсталиране“ и изчакайте няколко секунди, за да се изтегли форматиращият инструмент.
   

Когато формататорът Prettier е инсталиран, уверете се, че функцията за автоматично форматиране е включена, като следвате тези стъпки.

1. Създайте нов JSON файл или отворете такъв, който все още не е форматиран.
2. Кликнете върху „Настройки“ в долния ляв ъгъл.
   
3. Потърсете „Форматиране“.
   
4. Щракнете върху секцията „Форматиране по подразбиране“. от падащия списък изберете „По-красиво“.
   
5. Превъртете надолу и спрете, когато видите опцията „Редактор: Форматиране при запазване“.
   
6. Щракнете върху квадратчето до тази опция.
   
7. Проверете дали функцията за автоматично форматиране работи.

Това е всичко. Разширението Prettier в редактора на VS Code прави автоматичното форматиране лесно.

Автоматично форматиране на Python

В наши дни Python е един от най-популярните езици за програмиране и се използва широко от уеб разработчици и ентусиасти по кодиране. Използва се за проектиране и изграждане на софтуер и уебсайтове, анализиране на данни, автоматизиране на задачи и много други.

Ако използвате VS Code за редактиране на файла на Python, ще трябва да използвате правилния форматиращ инструмент. Докато Prettier работи за много различни езици за програмиране, той не е съвместим с Python.

За щастие VS Code предлага решение. Един от най-добрите програми за форматиране на Python във VS Code е Black и може да се използва за форматиране на код всеки път, когато записвате файл автоматично. Въпреки това, преди да използвате Black, трябва да изтеглите разширението Python на Microsoft за VS Code:

1. Отворете VS Code и потърсете „Python“ в полето за търсене.
   
2. Уверете се, че това е разширението на Microsoft и щракнете върху „Инсталиране“.
   
3. За да инсталирате Phyton formatter, въведете следния текст във вашата виртуална среда: “$ pip install black”.
4. Отидете на „Настройки“ във VS Code и потърсете „Доставчик на форматиране на Phyton“.
   
5. От падащото меню изберете „Черно“.
   
6. Превъртете надолу и намерете опцията „Редактор: Форматиране при запазване“.
   
7. Поставете отметка в квадратчето до тази опция.
   

Черен, инструментът за форматиране на Python вече автоматично ще форматира кода всеки път, когато запишете файла.

Автоматично форматиране на VS код при запазване

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

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

Ето как става това.

1. Отворете редактора на Visual Studio Code.
   
2. Щракнете върху иконата на зъбно колело „Настройки“ в долния ляв ъгъл.
   
3. Потърсете „Formatter“ и щракнете върху опцията „Editor: Default Formatter“.
   
4. От падащото меню изберете какъв формататор на код искате да използвате.
   
5. Превъртете малко надолу и поставете отметка в квадратчето до опцията „Редактор: Форматиране при запазване“.
   

Можете да повторите процеса за всеки форматиращ код, който използвате във VS Code.

Често задавани въпроси

Защо автоматичното „Форматиране при запазване“ не работи?

Ако имате опцията „Форматиране при запазване“ във форматиране на VS Code и тя не работи правилно, вероятно имате проблем.

Може би версията на формататора, която имате, изпитва проблеми и трябва да проверите дали има налична актуализация. Проблемът обаче може да не е от ваша страна и проблемът ще бъде изчистен от разработчиците на VS Code.

Как да изключа автоматичното форматиране във VS Code?

Деактивирането на функцията за автоматично форматиране е лесно. Следвайте тези стъпки, за да изключите автоматичното форматиране.

1. Отворете VS Code Editor и щракнете върху иконата „Настройки“.

2. Потърсете „Formatter“ и изберете форматиращия, за който искате да деактивирате автоматичното форматиране.

3. Намерете опцията „Редактор: Форматиране при запазване“ и премахнете отметката от квадратчето до нея.

Безпроблемно автоматично форматиране на код в Visual Studio Code

Един от най-добрите аспекти на използването на VS Code е неговият добре проектиран интерфейс, който позволява дори на начинаещите да се ориентират в редактора.

Правилното и непрекъснато форматиране на кода е от съществено значение за четлив код, но тези конвенции могат да бъдат тромави, ако трябва да ги направите ръчно.

Но добрата новина е, че редакторът на VS Code разполага с множество програми за форматиране на код, които могат да направят по-лесно и по-бързо писането на четим код.

Независимо дали е Prettier, Black или друго разширение, потребителите винаги имат опцията автоматично да форматират кода в момента, в който запазят файла.

Кой език за програмиране използвате и кой формататор работи най-добре? Уведомете ни в секцията за коментари по-долу.