Cum să configurați Prettier în Visual Studio Code

Scrierea unui cod curat și ușor de citit este esențială, indiferent dacă lucrați singur sau cu o echipă de dezvoltatori. În timp ce mulți factori contribuie la lizibilitatea codului, unul dintre cei mai importanți este formatarea consecventă a codului.

Dar iată problema: formatarea manuală a codului poate fi o durere absolută și foarte predispusă la erori. Instrumente precum Prettier facilitează mult formatarea HTML, CSS, JavaScript și alte limbi. Descoperiți cum să instalați și să utilizați extensia Prettier pentru formatarea codului, precum și câteva setări de configurare avansate.

Instalarea Prettier

Înainte de a continua, asigurați-vă că aveți Node.js instalat pe computer. Puteți instala cea mai recentă versiune din pagina oficială de descărcări Node.js. Vine cu managerul de pachete nod (npm) încorporat, pe care îl veți folosi pentru a vă gestiona pachetele Node.js.

După ce confirmați că Node.js este instalat local, începeți prin a crea un director gol pentru proiectul dvs. Puteți denumi directorul mai frumos-demo.

Apoi, cd în acel director folosind o linie de comandă, apoi rulați următoarea comandă pentru a inițializa un proiect Node.js:

npm init -y

Această comandă generează un fișier package.json care conține setările implicite.

Pentru a instala extensia Prettier, rulați această comandă de terminal:

npm i --save-dev mai frumos

The --save-dev flag se instalează mai frumos ca dependență de dezvoltare, ceea ce înseamnă că este folosit doar în timpul dezvoltării.

Acum că l-ați instalat, puteți începe să explorați cum funcționează Prettier folosindu-l pe linia de comandă.

Folosind Prettier prin linia de comandă

Începeți prin a crea un script.js fișier și populându-l cu următorul cod:

funcţiesumă(a, b) { întoarcere a + b}
const utilizator = { Nume: "Kyle", vârstă: 27,
 isProgrammer: Adevărat,
 cheie lungă: "Valoare",
 mai multe date: 3
}

Pentru a formata codul din acest fișier script.js prin linia de comandă, executați următoarea comandă:

npx mai frumos --write script.js

Comanda reformatează codul JavaScript din script.js la standardul implicit al lui Prettier. Acesta va fi rezultatul:

funcţiesumă(a, b) {
întoarcere a + b;
}
const utilizator = {
 Nume: "Kyle",
 vârstă: 27,
 isProgrammer: Adevărat,
 cheie lungă: "Valoare",
 mai multe date: 3,
};

De asemenea, puteți formata marcajul HTML din linia de comandă. Creaza un index.html fișier în același director ca script.js. Apoi lipiți următorul cod HTML prost formatat în fișier:

"" alt=""clasă=„pictogramă vreme mare”>

clasă=„currentHeaderTemp”><span>21span></div>
</div>
 </header>

Pentru a formata HTML, rulați această comandă:

npx mai frumos --write index.html

Această comandă reformatează HTML-ul la standardul implicit al lui Prettier, ceea ce are ca rezultat următorul cod:

<antet>
<div>
<imgsrc=""alt=""clasă=„pictogramă vreme mare” />
<divclasă=„currentHeaderTemp”><span>21span>div>
div>
antet>

De asemenea, puteți utiliza --Verifica flag pentru a verifica dacă codul este conform standardelor lui Prettier. Următorul exemplu verifică script.js:

npx mai frumos --verificați script.js

Acest lucru este util dacă doriți un cârlig de pre-commit pentru a vă asigura că oamenii folosesc Prettier și formatează fișierele înainte de a le împinge în Git. Acest lucru funcționează bine când contribuind la sursa deschisă.

Integrarea Prettier în codul Visual Studio

Utilizarea Prettier prin linia de comandă poate fi o durere. În loc să rulați manual o comandă de fiecare dată când doriți să formatați codul, o puteți configura să formateze automat atunci când modificați un fișier. Din fericire, Visual Studio Code (VS Code) are o modalitate încorporată de a face acest lucru pentru tine.

Du-te la Extensii filă în VS Code și căutați Mai frumos. Click pe Prettier - Formatator de cod, instalează-l, apoi activează-l.

Accesați setările VS Code navigând la Fișier > Preferințe > Setări. În caseta de căutare, căutați Mai frumos. Veți găsi o mulțime de opțiuni care vă vor ajuta să configurați extensia Prettier.

De obicei, vă puteți descurca cu setările implicite. Singurul lucru pe care ați putea să vă gândiți să îl schimbați este punctul și virgulă (le puteți elimina dacă doriți). În caz contrar, totul este setat implicit, dar îl puteți schimba așa cum doriți.

Asigurați-vă că activați formansave astfel încât codul din fiecare fișier să fie formatat automat atunci când salvați acel fișier. Pentru a-l activa, trebuie doar să căutați formansave și bifați căsuța.

Dacă nu utilizați VSCode sau extensia nu funcționează dintr-un motiv oarecare, puteți descărcați biblioteca onchange. Aceasta rulează comanda pentru a formata codul oricând modificați fișierul.

Cum să ignorați fișierele când formatați cu Prettier

Dacă ar fi să alergi mai frumos --scrie comanda pe întregul folder, ar trece prin fiecare dintre modulele nodului. Dar nu ar trebui să pierzi timpul formatând codul altora!

Pentru a ocoli această problemă, creați un .prettierignore fișier și includeți termenul module_noduri în dosar. Dacă ar fi să rulați --scrie comanda pe întregul folder, ar reformata toate fișierele, cu excepția celor din module_noduri pliant.

De asemenea, puteți ignora fișierele cu o anumită extensie. De exemplu, dacă doriți să ignorați toate fișierele HTML, adăugați pur și simplu *.html la .prettierignore.

Cum se configurează Prettier

Puteți configura modul în care doriți să funcționeze Prettier cu diferite opțiuni. O modalitate este de a adăuga un mai frumos cheia ta pachet.json fişier. Valoarea va fi un obiect care conține toate opțiunile de configurare:

{
 ...
"scripte": {
"Test": „Echo \”Eroare: nu a fost specificat niciun test\” && ieșire 1”
 },
 mai frumos: {
// opțiunile mergi aici
 }
}

A doua opțiune (pe care o recomandăm) este să creați un .prettierrc fişier. Acest fișier vă va permite să faceți tot felul de personalizări.

Să presupunem că nu vă plac punctele și virgulă. Le puteți elimina prin plasarea următorului obiect în fișier:

{
"semi": Adevărat,
"supracrie": [
 {
"fisiere": „.ts”,
"Opțiuni": {
"semi": fals
 }
 }
 ]
}

The suprascrie proprietatea vă permite să definiți suprascrieri personalizate pentru anumite fișiere sau extensii de fișiere. În acest caz, spunem că toate fișierele care se termină în .ts (adică fișiere dactilografiate) nu ar trebui să aibă punct și virgulă.

Utilizarea Prettier cu ESLint

ESLint este un instrument de listing pentru detectarea erorilor în codul JavaScript, precum și pentru formatarea acestuia. Dacă utilizați Prettier, probabil că nu ați dori să utilizați ESLint și pentru formatare. Pentru a le folosi împreună, va trebui să instalați și să configurați eslint-config-prettier. Acest instrument dezactivează toate configurațiile ESLint pentru lucrurile pe care Prettier se ocupă deja.

În primul rând, trebuie să îl instalați:

npm i --save-dev eslint-config-prettier

Apoi, adăugați-l la lista de extinde din .eslintrc fișier (asigurați-vă că este ultimul lucru din listă):

{
"se extinde": [
„unele-alte-configurații-folosești”,
"mai frumos"
 ],
"reguli": {
"indentare": "eroare"
 }
}

Acum ESLint va dezactiva toate regulile de care Prettier se ocupă deja pentru a preveni conflictele.

Curățați-vă baza de cod cu Prettier și ESLint

Prettier este un instrument ideal pentru a vă curăța codul și pentru a aplica formatarea consecventă în cadrul unui proiect. Setarea acestuia să funcționeze cu VS Code înseamnă că este întotdeauna la îndemână.

ESLint este un instrument JavaScript obligatoriu care merge mână în mână cu Prettier. Oferă o mulțime de funcții și opțiuni de personalizare care depășesc formatarea de bază. Aflați cum să utilizați ESLint cu JavaScript dacă doriți să fiți un dezvoltator mai productiv.