Kako postaviti ljepše u Visual Studio Code

Pisanje čistog i čitljivog koda ključno je, radite li sami ili s timom programera. Iako mnogi čimbenici doprinose čitljivosti koda, jedan od najvažnijih je dosljedno oblikovanje koda.

Ali evo problema: ručno formatiranje koda može biti apsolutna muka i vrlo je sklono pogreškama. Alati kao što je Prettier čine oblikovanje HTML-a, CSS-a, JavaScripta i drugih jezika mnogo lakšim. Otkrijte kako instalirati i koristiti proširenje Prettier za oblikovanje koda, kao i neke napredne konfiguracijske postavke.

Instaliranje Prettiera

Prije nastavka provjerite imate li Node.js instaliran na vašem računalu. Najnoviju verziju možete instalirati s službena stranica za preuzimanje Node.js. Dolazi sa upravitelj paketa čvora (npm) ugrađeni, koji ćete koristiti za upravljanje svojim Node.js paketima.

Nakon što potvrdite da je Node.js instaliran lokalno, počnite stvaranjem praznog direktorija za svoj projekt. Imeniku možete dati ime ljepše-demo.

Zatim uđite u taj direktorij pomoću naredbenog retka, zatim pokrenite sljedeću naredbu za inicijalizaciju Node.js projekta:

npm init -y

Ova naredba generira datoteku package.json koja sadrži zadane postavke.

Da biste instalirali proširenje Prettier, pokrenite ovu terminalsku naredbu:

npm i --save-dev ljepše

The --save-dev zastavica se ljepše instalira kao dev dependency, što znači da se koristi samo tijekom razvoja.

Sada kada ste ga instalirali, možete početi istraživati ​​kako Prettier radi koristeći ga u naredbenom retku.

Korištenje programa Prettier putem naredbenog retka

Započnite stvaranjem a skripta.js datoteku i popuniti je sljedećim kodom:

funkcijaiznos(a, b) { povratak a + b}
konst korisnik = { Ime: "Kyle", dob: 27,
 isProgramer: pravi,
 dugi ključ: "Vrijednost",
 više podataka: 3
}

Da biste formatirali kod u ovoj datoteci script.js putem naredbenog retka, pokrenite sljedeću naredbu:

npx ljepši --napišite skriptu.js

Naredba preoblikuje JavaScript kod u script.js prema zadanom standardu tvrtke Prettier. Ovo će biti rezultat:

funkcijaiznos(a, b) {
povratak a + b;
}
konst korisnik = {
 Ime: "Kyle",
 dob: 27,
 isProgramer: pravi,
 dugi ključ: "Vrijednost",
 više podataka: 3,
};

Također možete formatirati HTML oznake iz naredbenog retka. Stvorite index.html datoteka u istom direktoriju kao skripta.js. Zatim zalijepite sljedeći loše formatirani HTML u datoteku:

"" alt=""razreda="velika ikona vremena">

razreda="currentHeaderTemp"><raspon>21raspon></div>
</div>
 </header>

Da biste formatirali HTML, pokrenite ovu naredbu:

npx ljepši --napišite indeks.html

Ova naredba preoblikuje HTML prema zadanom standardu tvrtke Prettier, što rezultira sljedećim kodom:

<Zaglavlje>
<div>
<imgsrc=""alt=""razreda="velika ikona vremena" />
<divrazreda="currentHeaderTemp"><raspon>21raspon>div>
div>
Zaglavlje>

Također možete koristiti --ček zastavicu za provjeru je li kod u skladu s Prettierovim standardima. Sljedeći primjer provjerava skripta.js:

npx ljepši --provjeri skriptu.js

Ovo je korisno ako želite pre-commit hook kako biste bili sigurni da ljudi koriste Prettier i formatiraju datoteke prije nego što ih gurnu u Git. Ovo dobro funkcionira kada pridonoseći otvorenom kodu.

Integracija Prettiera u Visual Studio Code

Korištenje programa Prettier putem naredbenog retka može biti mučno. Umjesto ručnog pokretanja naredbe svaki put kada želite formatirati kod, možete ga postaviti da se automatski formatira kada promijenite datoteku. Srećom, Visual Studio Code (VS Code) ima ugrađen način da to učini umjesto vas.

Idi na Ekstenzije karticu u VS kodu i potražite Ljepša. Kliknite na Prettier - Format koda, instalirajte ga, a zatim ga omogućite.

Uđite u postavke VS koda tako što ćete otići na Datoteka > Postavke > Postavke. U okviru za pretraživanje potražite Ljepša. Pronaći ćete mnoštvo opcija koje će vam pomoći da konfigurirate proširenje Prettier.

Obično možete proći sa zadanim postavkama. Jedina stvar koju biste mogli promijeniti su točke-zarezi (možete ih ukloniti ako želite). Inače, sve je postavljeno prema zadanim postavkama, ali možete to promijeniti kako god želite.

Obavezno omogućite formatonsave opciju tako da se kôd u svakoj datoteci automatski formatira kada spremite tu datoteku. Da biste to omogućili, samo potražite formatonsave i označite kućicu.

Ako ne koristite VSCode ili ekstenzija iz nekog razloga ne radi, možete preuzmite biblioteku onchange. Ovo pokreće naredbu za formatiranje koda kad god promijenite datoteku.

Kako zanemariti datoteke prilikom formatiranja pomoću programa Prettier

Kad bi trčao ljepši --pisati na cijeloj vašoj mapi, prošla bi kroz svaki pojedini modul vašeg čvora. Ali ne biste trebali gubiti vrijeme na formatiranje koda drugih ljudi!

Da biste riješili ovaj problem, stvorite a .ljepšiignoriraj datoteku i uključite pojam čvor_moduli u datoteci. Ako biste pokrenuli --pisati na cijeloj mapi, ponovno bi formatirao sve datoteke osim onih u čvor_moduli mapa.

Također možete zanemariti datoteke s određenim nastavkom. Na primjer, ako želite zanemariti sve HTML datoteke, jednostavno dodajte *.html do .ljepšiignoriraj.

Kako konfigurirati Prettier

Možete konfigurirati kako želite da Prettier radi s različitim opcijama. Jedan od načina je dodati a ljepša ključ vašeg paket.json datoteka. Vrijednost će biti objekt koji sadrži sve opcije konfiguracije:

{
 ...
"skripte": {
"test": "echo \"Pogreška: nije naveden test\" && izlaz 1"
 },
 ljepši: {
// opcije idu ovdje
 }
}

Druga opcija (koju preporučujemo) je stvaranje a .ljepširc datoteka. Ova datoteka će vam omogućiti sve vrste prilagodbi.

Recimo da ne volite točku i zarez. Možete ih ukloniti postavljanjem sljedećeg objekta u datoteku:

{
"polu": pravi,
"nadjačava": [
 {
"datoteke": ".ts",
"opcije": {
"polu": lažno
 }
 }
 ]
}

The nadjačava svojstvo vam omogućuje definiranje prilagođenih nadjačavanja za određene datoteke ili ekstenzije datoteka. U ovom slučaju kažemo da sve datoteke koje završavaju na .ts (odnosno datoteke tipkanja) ne bi smjele imati točku-zarez.

Korištenje Prettiera s ESLint-om

ESLint je alat za linting za otkrivanje pogrešaka u JavaScript kodu, kao i za njegovo formatiranje. Ako koristite Prettier, vjerojatno ne biste htjeli koristiti ESLint i za formatiranje. Da biste ih koristili zajedno, morat ćete instalirati i postaviti eslint-config-ljepši. Ovaj alat isključuje sve ESLint konfiguracije za stvari koje Prettier već obrađuje.

Prvo ga morate instalirati:

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

Zatim ga dodajte na popis proširenja u .eslintrc datoteka (provjerite je li posljednja stvar na popisu):

{
"proširuje": [
"neku-drugu-konfiguraciju-koristite",
"ljepši"
 ],
"pravila": {
"uvlaka": "greška"
 }
}

Sada će ESLint onemogućiti sva pravila o kojima Prettier već brine kako bi spriječio sukobe.

Očistite svoju bazu kodova pomoću programa Prettier i ESLint

Prettier je idealan alat za čišćenje vašeg koda i provođenje dosljednog oblikovanja unutar projekta. Postavljanje da radi s VS Codeom znači da je uvijek nadohvat ruke.

ESLint je JavaScript alat koji morate imati i koji ide ruku pod ruku s Prettierom. Omogućuje mnoštvo značajki i mogućnosti prilagodbe koje nadilaze osnovno oblikovanje. Naučite kako koristiti ESLint s JavaScriptom ako želite biti produktivniji programer.