Висуал Студио Цоде, популарно познат као ВС Цоде, један је од најчешће коришћених уређивача кода. ВС Цоде има уграђену подршку за Ноде.јс, ЈаваСцрипт и ТипеСцрипт. Међутим, можете користити различите екстензије да бисте га учинили доступним већини других језика и времена извођења.
Мицрософт је компанија која је развила овај бесплатни уређивач кода отвореног кода.
ВС Цоде је популаран због ових карактеристика;
- Интеллисенсе: ВС Цоде обезбеђује аутоматско довршавање кода и истицање синтаксе.
- Више платформи: Овај уређивач кода можете користити на Линук, Виндовс и мацОС оперативним системима.
- Доступност различитих екстензија: Доступност различитих екстензија такође може да трансформише ВС Цоде у интегрисано развојно окружење (ИДЕ).
- Подршка за више језика: Ову алатку можете користити са скоро свим програмским језицима преко ВС Цоде екстензија.
- Интегрисани терминал: Уграђени терминал у ВС Цоде омогућава програмерима да извршавају Гит команде директно из уређивача кода. Тако можете да урезујете, гурате и повлачите промене из овог уређивача.
Преглед садржаја
Аутоматско форматирање у ВС коду
Предуслови
- ВС Цоде: Овај уређивач кода је бесплатан за преузимање. Ако га немате инсталиран на вашој машини, преузмите га са званичног сајта, у зависности од вашег оперативног система.
- Изаберите језик који ћете користити: Морате одлучити који језик ћете користити јер постоје различити форматери за различите језике.
- Форматер: ВС Цоде користи екстензије за форматирање кода. У овом чланку ћемо користити Преттиер. Међутим, слободни сте да користите било који форматер који одговара језику који користите.
Аутоматско форматирање је функција која аутоматски форматира блокове/редове кода или датотеку у уређивачу кода на основу специфичних правила и смерница. Ова функција је заснована на конфигурационој датотеци која наводи правила форматирања увлачења, прелома редова и размака.
Када је функција аутоматског форматирања омогућена, сва ова правила ће се применити на све датотеке у вашој бази кодова док је пишете.
Међутим, такође можете да онемогућите аутоматско форматирање за одређени блок кода ако желите да се издваја од осталих. Да бисте то постигли, можете умотати део кода у блок коментара који наводи правила која ће се применити.
Предности аутоматског форматирања кодова у ВС коду
- Штеди време: Писање кода и форматирање може бити дуготрајно. Аутоматско форматирање вам штеди време, па се тако можете више фокусирати на процес писања и синтаксу.
- Доследност: Иако се изворни код не појављује на страни клијента, требало би да постоји извесна доследност. Аутоматско форматирање је корисно, посебно за велике пројекте са више сарадника.
- Примећује најбоље праксе: Функција аутоматског форматирања је згодна за спровођење доследних конвенција увлачења, размака и именовања.
- За лако читање кода: Добро форматиран код је лако пратити током прегледа кода. Нови програмери који се придруже вашој организацији лако ће разумети добро форматиран код.
Како омогућити аутоматско форматирање у ВС коду и прилагодити га
Пратите ове кораке да бисте омогућили аутоматско форматирање:
Када се Преттиер инсталира на ваш ВС код, можете омогућити функцију аутоматског форматирања.
Користимо једноставну ХТМЛ датотеку странице за пријаву да покажемо како да омогућимо аутоматско форматирање.
Користићемо овај код:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Иако је горњи код функционалан, тешко га је читати и пратити јер није увучен како се очекивало. Користићемо Преттиер за аутоматско форматирање кода.
Пратите ове кораке.
3. Откуцајте Форматтер у траци за претрагу и изаберите Преттиер на картици Едитор:Дефаулт Форматтер.
4. Пронађите Едитор: Формат на Сачувај и означите поље.
5. Сачувајте своју ХТМЛ датотеку, изаберите уносе у свом ХТМЛ документу, кликните десним тастером миша и изаберите Форматирај документ.
6. Проверите да ли је ваш документ форматиран. Ово проширење ће аутоматски форматирати сав остали код који напишете на свом ВС коду.
6. Подесите подешавања Преттиер Цонфигуратион: Преттиер је подразумевано подешен да обавља многе ствари. Међутим, и даље га можете прилагодити својим потребама. Идите на Подешавања на свом ВС коду, потражите Преттиер и прилагодите подешавања по свом укусу.
7. Направите датотеку лепше конфигурације: Подешавања која сте конфигурисали на свом рачунару могу се разликовати од других ако радите као тим. Лепша конфигурациона датотека ће обезбедити да имате конзистентан стил кода за ваш пројекат. Направите .преттиеррц датотеку са екстензијом .јсон да бисте конфигурисали поставке пројекта. Можемо додати овај код у ЈСОН датотеку у сврху демонстрације;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Горњи блок кода специфицира четири ствари, зарезе на крају, ширину табулатора, употребу тачака и зареза и да ли треба користити једноструке или двоструке наводнике. У овом случају;
- Зарез на крају ће бити додат само када се код транспилира у ес5.
- Ширина картице, број размака за сваку картицу, је постављена на 4.
- Полу означава да ли треба да додате тачке и зарезе у ваш код на крају израза. Поставили смо га као нетачно, што значи да се тачке и зарезе неће додавати.
- Можете користити једноструке или двоструке наводнике у свом коду. Навели смо да за овај пројекат треба да користимо једноструке наводнике.
Можете да погледате Преттиер документе да бисте разумели како да креирате конзистентна подешавања конфигурације.
Најбоље праксе за аутоматско форматирање у ВС коду
Користите прави формат
Иако смо користили Преттиер у овом чланку у сврху демонстрације, то не значи да се односи на све језике. Постоје стотине екстензија за форматирање за ВС Цоде, а на вама је да одредите шта одговара вашим потребама. На пример, форматери као што су Преттиер и Беаутифи одговарају ХТМЛ и ЦСС. С друге стране, можете користити Блацк или Питхон екстензије да форматирате свој Питхон код.
Користите доследан стил кода
Као што сте видели, можете прилагодити подешавања форматера. Ако радите као тим, уверите се да имате исте конфигурације да бисте креирали конзистентан стил кода. Најбољи приступ је креирање датотеке .преттиеррц.ектенсион која укључује све конфигурације за ваш пројекат.
Користите линтере
Можете користити линтере за проверу кршења стила, синтаксичких грешака и грешака у програмирању у вашем коду. Комбиновање линтера са аутоматским форматирањем уштедеће вам много времена и труда да учините свој код читљивим и отклањате грешке.
Користите пречице на тастатури
ВС Цоде има стотине пречица за уштеду времена у форматирању. Можете чак и прилагодити ове команде нечему незаборавном.
Проверите свој код пре обавезивања
Иако линтинг и аутоматско форматирање могу решити неке проблеме у вашем коду; и даље морате да прегледате свој код пре него што унесете команду за урезивање.
Пречице за форматирање кода
ВС Цоде је мултиплатформски уређивач кода који можете користити на Виндовс, Мац и Линук системима као што је Убунту. Можете користити следеће пречице да бисте форматирали цео документ или посебно истакнуте области вашег кода;
Виндовс
- Комбинација Схифт + Алт + Ф форматира цео документ.
- Комбинација Цтрл + К, Цтрл + Ф форматира део кода који сте изабрали. На пример, див.
мацОС
- Комбинација Схифт + Оптион + Ф форматира цео документ.
- Комбинација Цтрл + К, Цтрл + Ф форматира део кода који сте изабрали. На пример, див.
Убунту
- Комбинација Цтрл + Схифт + И форматира цео документ.
- Комбинација Цтрл + К, Цтрл + Ф форматира део кода који сте изабрали. На пример, див.
Међутим, имајте на уму да неке од ових пречица можда неће успети ако сте прилагодили свој ВС код различитим пречицама.
Можете проверити своје ВС Цоде пречице користећи ове кораке;
- Отворите ВС Цоде и кликните на ставку Датотека у горњем левом углу.
- Померите се до Преференцес
- Кликните на Пречице на тастатури да бисте видели све пречице које можете да користите.
Закључак
Аутоматско форматирање вам може уштедети много времена када га омогућите. Избор екстензије ће се разликовати у зависности од језика који користите. Можете инсталирати више форматера кода у зависности од програмских језика које користите за своје пројекте.
Увек проверите документацију форматера који одаберете за свој код. Ово ће осигурати да разумете језике које подржава и како да то најбоље искористите.
Погледајте наш чланак о најбољим ВС Цоде екстензијама које програмери треба да користе.