Kako nastaviti lepše v kodi Visual Studio

Pisanje čiste in berljive kode je bistveno, ne glede na to, ali delate sami ali z ekipo razvijalcev. Čeprav številni dejavniki prispevajo k berljivosti kode, je eden najpomembnejših dosledno oblikovanje kode.

Toda tukaj je težava: ročno oblikovanje kode je lahko absolutna težava in zelo nagnjeno k napakam. Orodja, kot je Prettier, zelo olajšajo oblikovanje HTML, CSS, JavaScript in drugih jezikov. Odkrijte, kako namestiti in uporabljati razširitev Prettier za oblikovanje kode ter nekaj naprednih konfiguracijskih nastavitev.

Namestitev programa Prettier

Preden nadaljujete, se prepričajte, da imate v računalniku nameščen Node.js. Najnovejšo različico lahko namestite iz uradna stran za prenose Node.js. Prihaja z upravljalnik paketov vozlišča (npm) vgrajeno, ki jo boste uporabljali za upravljanje svojih paketov Node.js.

Ko potrdite, da je Node.js nameščen lokalno, začnite z ustvarjanjem praznega imenika za svoj projekt. Imenik lahko poimenujete

lepši-demo.

Nato z ukazno vrstico pojdite v ta imenik in zaženite naslednji ukaz za inicializacijo projekta Node.js:

npm init -y

Ta ukaz ustvari datoteko package.json, ki vsebuje privzete nastavitve.

Če želite namestiti razširitev Prettier, zaženite ta terminalski ukaz:

npm i --save-dev lepši

The --save-dev zastavica se namesti lepše kot odvisnost razvijalca, kar pomeni, da se uporablja samo med razvojem.

Zdaj, ko ste ga namestili, lahko začnete raziskovati, kako deluje Prettier, tako da ga uporabite v ukazni vrstici.

Uporaba programa Prettier prek ukazne vrstice

Začnite z ustvarjanjem a script.js datoteko in jo zapolnite z naslednjo kodo:

funkcijovsota(a, b) { vrnitev a + b}
konst uporabnik = { ime: "Kyle", starost: 27,
 isProgrammer: prav,
 dolgi ključ: "Vrednost",
 več podatkov: 3
}

Če želite oblikovati kodo v tej datoteki script.js prek ukazne vrstice, zaženite naslednji ukaz:

npx lepši --write script.js

Ukaz preoblikuje kodo JavaScript v script.js na Prettierjev privzeti standard. To bo rezultat:

funkcijovsota(a, b) {
vrnitev a + b;
}
konst uporabnik = {
 ime: "Kyle",
 starost: 27,
 isProgrammer: prav,
 dolgi ključ: "Vrednost",
 več podatkov: 3,
};

Oznako HTML lahko formatirate tudi v ukazni vrstici. Ustvarite index.html datoteko v istem imeniku kot script.js. Nato v datoteko prilepite ta slabo oblikovan HTML:

"" alt=""razred="velika ikona vremena">

razred="currentHeaderTemp"><razpon>21razpon></div>
</div>
 </header>

Če želite formatirati HTML, zaženite ta ukaz:

npx lepši --write index.html

Ta ukaz preoblikuje HTML v privzeti standard podjetja Prettier, kar povzroči naslednjo kodo:

<glava>
<div>
<imgsrc=""alt=""razred="velika ikona vremena" />
<divrazred="currentHeaderTemp"><razpon>21razpon>div>
div>
glava>

Uporabite lahko tudi --preveriti zastavico za preverjanje, ali je koda v skladu s standardi podjetja Prettier. Naslednji primer preverja script.js:

npx lepši --preverite skript.js

To je uporabno, če želite kavelj pred potrditvijo, da zagotovite, da ljudje uporabljajo Prettier in formatirajo datoteke, preden jih potisnete v Git. To dobro deluje, ko prispevanje k odprtokodnosti.

Integracija Prettier v kodo Visual Studio

Uporaba programa Prettier prek ukazne vrstice je lahko boleča. Namesto ročnega izvajanja ukaza vsakič, ko želite formatirati kodo, jo lahko nastavite tako, da se samodejno formatira, ko spremenite datoteko. Na srečo ima Visual Studio Code (VS Code) vgrajen način, da to stori namesto vas.

Pojdi na Razširitve zavihek v kodi VS in poiščite lepša. Kliknite na Prettier – Oblikovalnik kode, ga namestite in nato omogočite.

Pojdite v nastavitve kode VS tako, da se pomaknete do Datoteka > Nastavitve > Nastavitve. V iskalnem polju poiščite lepša. Našli boste ogromno možnosti, ki vam bodo pomagale konfigurirati razširitev Prettier.

Običajno lahko preživite s privzetimi nastavitvami. Edina stvar, ki bi jo morda morali spremeniti, so podpičja (lahko jih odstranite, če želite). Sicer je vse nastavljeno na privzeto, vendar lahko spremenite, kakor želite.

Ne pozabite omogočiti formatonsave tako da se koda v vsaki datoteki samodejno oblikuje, ko to datoteko shranite. Če ga želite omogočiti, preprosto poiščite formatonsave in označite polje.

Če ne uporabljate VSCode ali razširitev iz nekega razloga ne deluje, lahko prenesite knjižnico onchange. To zažene ukaz za formatiranje kode vsakič, ko spremenite datoteko.

Kako prezreti datoteke pri oblikovanju s programom Prettier

Če bi tekel lepši --piši v vaši celotni mapi, bi šel skozi vsak posamezen modul vašega vozlišča. Vendar ne bi smeli izgubljati časa s formatiranjem kode drugih!

Če želite rešiti to težavo, ustvarite a .prettierignore datoteko in vključite izraz moduli_vozlišča v datoteki. Če bi vodili --piši za celotno mapo, bi preoblikoval vse datoteke razen tistih v moduli_vozlišča mapo.

Datoteke z določeno pripono lahko tudi prezrete. Na primer, če želite prezreti vse datoteke HTML, preprosto dodajte *.html do .prettierignore.

Kako konfigurirati Prettier

Konfigurirate lahko, kako želite, da Prettier deluje z različnimi možnostmi. Eden od načinov je, da dodate a lepša ključ do vašega package.json mapa. Vrednost bo predmet, ki vsebuje vse konfiguracijske možnosti:

{
 ...
"skripte": {
"test": "echo \"Napaka: test ni določen\" && izhod 1"
 },
 lepša: {
// tukaj so možnosti
 }
}

Druga možnost (ki jo priporočamo) je ustvariti a .prettierrc mapa. Ta datoteka vam bo omogočila vse vrste prilagoditev.

Recimo, da ne marate podpičja. Lahko jih odstranite tako, da v datoteko postavite naslednji predmet:

{
"pol": prav,
"preglasi": [
 {
"datoteke": ".ts",
"opcije": {
"pol": lažno
 }
 }
 ]
}

The preglasi vam omogoča, da določite preglasitve po meri za določene datoteke ali datotečne pripone. V tem primeru pravimo, da se vse datoteke, ki se končajo z .ts (to je tipkopisne datoteke) ne smejo imeti podpičja.

Uporaba Prettier z ESLint

ESLint je orodje za odkrivanje napak v kodi JavaScript in njeno oblikovanje. Če uporabljate Prettier, verjetno ne bi želeli uporabljati ESLint tudi za oblikovanje. Če jih želite uporabljati skupaj, jih boste morali namestiti in nastaviti eslint-config-prettier. To orodje izklopi vse konfiguracije ESLint za stvari, ki jih Prettier že obravnava.

Najprej ga morate namestiti:

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

Nato ga dodajte na seznam razširitev v .eslintrc datoteka (prepričajte se, da je zadnja na seznamu):

{
"podaljša": [
"nekatera-druga-konfiguracija-uporabljate",
"lepši"
 ],
"pravila": {
"zamik": "napaka"
 }
}

Zdaj bo ESLint onemogočil vsa pravila, za katera Prettier že skrbi, da prepreči konflikte.

Očistite svojo zbirko kod z Prettier in ESLint

Prettier je idealno orodje za čiščenje vaše kode in uveljavljanje doslednega oblikovanja v projektu. Če ga nastavite tako, da deluje s kodo VS, je vedno na dosegu roke.

ESLint je orodje JavaScript, ki ga morate imeti in gre z roko v roki s programom Prettier. Ponuja ogromno funkcij in možnosti prilagajanja, ki presegajo osnovno oblikovanje. Naučite se uporabljati ESLint z JavaScriptom, če želite biti bolj produktiven razvijalec.