Visual Studio Code, cunoscut sub numele de VS Code, este unul dintre cei mai folosiți editori de cod. VS Code are suport încorporat pentru Node.js, JavaScript și TypeScript. Cu toate acestea, puteți utiliza diverse extensii pentru a-l face accesibil pentru majoritatea celorlalte limbi și runtime.
Microsoft este compania care a dezvoltat acest editor de cod gratuit și open-source.
VS Code este popular datorită acestor caracteristici;
- Intellisense: VS Code oferă completarea automată a codului și evidențierea sintaxei.
- Multiplatformă: puteți utiliza acest editor de cod pe sistemele de operare Linux, Windows și macOS.
- Disponibilitatea diferitelor extensii: Disponibilitatea diferitelor extensii poate transforma, de asemenea, VS Code într-un mediu de dezvoltare integrat (IDE).
- Suport în mai multe limbi: puteți utiliza acest instrument cu aproape toate limbajele de programare prin extensiile VS Code.
- Terminal integrat: Terminalul încorporat în VS Code permite dezvoltatorilor să execute comenzi Git direct din editorul de cod. Astfel, puteți efectua, împinge și extrage modificări din acest editor.
Cuprins
Formatare automată în VS Code
Cerințe preliminare
- VS Code: Acest editor de cod poate fi descărcat gratuit. Dacă nu îl aveți instalat pe computer, descărcați-l de pe site-ul oficial, în funcție de sistemul dvs. de operare.
- Selectați limba de utilizat: trebuie să decideți limba pe care să o utilizați, deoarece există diferite formatoare pentru diferite limbi.
- Un formatator: VS Code utilizează extensii pentru formatarea codului. Vom folosi Prettier în acest articol. Cu toate acestea, sunteți liber să utilizați orice formatator care se potrivește limbii pe care o utilizați.
Formatarea automată este o caracteristică care formatează automat blocuri/linii de cod sau un fișier în editorul de cod pe baza unor reguli și linii directoare specifice. Această caracteristică se bazează pe un fișier de configurare care specifică regulile de formatare pentru indentare, întreruperi de linie și spațiere.
Când funcția de formatare automată este activată, toate aceste reguli vor fi aplicate tuturor fișierelor din baza de cod pe măsură ce o scrieți.
Cu toate acestea, puteți dezactiva și formatarea automată pentru un anumit bloc de cod dacă doriți să iasă în evidență de restul. Pentru a realiza acest lucru, puteți împacheta fragmentul de cod într-un bloc de comentarii care specifică regulile care trebuie aplicate.
Beneficiile formatării automate a codurilor în codul VS
- Economisește timp: scrierea codului și formatarea pot fi consumatoare de timp. Formatarea automată economisește timp și, astfel, vă puteți concentra mai mult pe procesul de scriere și pe sintaxă.
- Consecvență: chiar dacă codul sursă nu apare pe partea clientului, ar trebui să existe o anumită consecvență. Formatarea automată este utilă, mai ales pentru proiectele mari cu mai mulți colaboratori.
- Respectă cele mai bune practici: caracteristica de formatare automată este utilă pentru a impune convenții consecvente de indentare, spațiere și denumire.
- Pentru citirea ușoară a codului: codul bine formatat este ușor de urmărit în timpul revizuirii codului. Dezvoltatorii noi care se alătură organizației dvs. vor înțelege cu ușurință codul bine formatat.
Cum să activați Formatarea automată în codul VS și să-l personalizați
Urmați acești pași pentru a activa formatarea automată:
Odată ce Prettier este instalat pe VS Code, puteți activa funcția de formatare automată.
Folosim un fișier HTML simplu al unei pagini de autentificare pentru a demonstra cum se activează formatarea automată.
Vom folosi acest cod:
<!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>
Chiar dacă codul de mai sus este funcțional, este greu de citit și urmat deoarece nu este indentat așa cum era de așteptat. Vom folosi Prettier pentru a formata automat codul.
Urmați acești pași.
3. Tastați Formatter în bara de căutare și selectați Prettier în fila Editor:Default Formatter.
4. Localizați Editor: Formatați pe Salvare și bifați caseta.
5. Salvați fișierul HTML, selectați intrările din documentul HTML, faceți clic dreapta și selectați Format Document.
6. Verificați dacă documentul dvs. a fost formatat. Această extensie va formata automat toate celelalte coduri pe care le scrieți pe VS Code.
6. Ajustați setările de configurare Prettier: Prettier este configurat pentru a efectua multe lucruri în mod implicit. Cu toate acestea, îl puteți personaliza în continuare pentru a se potrivi nevoilor dvs. Accesați Setări pe codul dvs. VS, căutați Prettier și ajustați setările după cum doriți.
7. Creați un fișier de configurare mai frumos: setările pe care le-ați configurat pe mașina dvs. pot diferi de altele dacă lucrați ca o echipă. Un fișier de configurare mai frumos vă va asigura că aveți un stil de cod consecvent pentru proiectul dvs. Creați un fișier .prettierrc cu extensia .json pentru a configura setările proiectului. Putem adăuga acest cod în fișierul JSON în scopuri demonstrative;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Blocul de cod de mai sus specifică patru lucruri, virgulă finală, lățimea tabulatorului, utilizarea punctului și virgulă și dacă se utilizează ghilimele simple sau duble. În acest caz;
- O virgulă finală va fi adăugată numai atunci când codul este transpilat în es5.
- Lățimea filei, numărul de spații pentru fiecare filă, este setată la 4.
- Semi indică dacă ar trebui să adăugați sau nu punct și virgulă la codul dvs. la sfârșitul instrucțiunilor. L-am setat ca fals, ceea ce înseamnă că nu vor fi adăugate punct și virgulă.
- Puteți folosi fie ghilimele simple, fie duble în codul dvs. Am precizat că ar trebui să folosim ghilimele simple pentru acest proiect.
Puteți consulta documentele Prettier pentru a înțelege cum să creați setări de configurare coerente.
Cele mai bune practici pentru formatarea automată în VS Code
Folosiți formatul corect
Chiar dacă am folosit Prettier în acest articol în scopuri demonstrative, aceasta nu înseamnă că se aplică tuturor limbilor. Există sute de extensii de formatare pentru VS Code și depinde de dvs. să determinați ce se potrivește nevoilor dvs. De exemplu, formatatorii precum Prettier și Beautify se potrivesc cu HTML și CSS. Pe de altă parte, puteți utiliza extensiile Black sau Python pentru a vă formata codul Python.
Utilizați un stil de cod consecvent
După cum ați văzut, puteți personaliza setările formatatorului. Dacă lucrați ca o echipă, asigurați-vă că aveți aceleași configurații pentru a crea un stil de cod consistent. Cea mai bună abordare este crearea unui fișier .prettierrc.extension pentru a include toate configurațiile pentru proiectul dvs.
Folosiți linters
Puteți utiliza linters pentru a verifica dacă există încălcări ale stilului, erori de sintaxă și greșeli de programare în codul dvs. Combinarea linters cu formatarea automată vă va economisi mult timp și efort pentru a vă face codul lizibil și a depana.
Utilizați comenzile rapide de la tastatură
VS Code are sute de comenzi rapide pentru a vă economisi timp la formatare. Puteți chiar personaliza aceste comenzi la ceva memorabil.
Verificați-vă codul înainte de a vă angaja
Chiar dacă lingarea și formatarea automată pot rezolva unele probleme ale codului dvs.; mai trebuie să revizuiți codul înainte de a introduce comanda commit.
Comenzi rapide pentru formatarea codului
VS Code este un editor de cod multiplatform pe care îl puteți utiliza pe sisteme bazate pe Windows, Mac și Linux, cum ar fi Ubuntu. Puteți utiliza următoarele comenzi rapide fie pentru a formata întregul document, fie pentru anumite zone evidențiate ale codului dvs.;
Windows
- Combinația Shift + Alt + F formatează întregul document.
- Combinația Ctrl + K, Ctrl + F formatează o secțiune a codului pe care ați selectat-o. De exemplu, un div.
macOS
- Combinația Shift + Opțiune + F formatează întregul document.
- Combinația Ctrl + K, Ctrl + F formatează o secțiune a codului pe care ați selectat-o. De exemplu, un div.
Ubuntu
- Combinația Ctrl + Shift + I formatează întregul document.
- Combinația Ctrl + K, Ctrl + F formatează o secțiune a codului pe care ați selectat-o. De exemplu, un div.
Cu toate acestea, rețineți că unele dintre aceste comenzi rapide pot eșua dacă v-ați personalizat VS Code cu diverse comenzi rapide.
Puteți verifica comenzile rapide VS Code utilizând acești pași;
- Deschideți VS Code și faceți clic pe elementul Fișier din colțul din stânga sus.
- Derulați la Preferințe
- Faceți clic pe Comenzi rapide de la tastatură pentru a vedea toate comenzile rapide pe care le puteți utiliza.
Concluzie
Formatarea automată vă poate economisi mult timp atunci când o activați. Alegerea unei extensii va diferi în funcție de limba pe care o utilizați. Puteți instala mai multe formatoare de cod în funcție de limbajele de programare pe care le utilizați pentru proiectele dvs.
Verificați întotdeauna documentația formatatorului pe care îl alegeți pentru codul dvs. Acest lucru vă va asigura că înțelegeți limbile pe care le acceptă și cum să profitați la maximum de ele.
Consultați articolul nostru despre cele mai bune extensii VS Code pe care ar trebui să le folosească dezvoltatorii.