Kuidas Visual Studio Code'is ilusamat seadistada

Puhta ja loetava koodi kirjutamine on oluline, olenemata sellest, kas töötate üksi või koos arendajate meeskonnaga. Kuigi koodi loetavust soodustavad paljud tegurid, on üks olulisemaid tegureid järjepidev koodi vormindamine.

Kuid siin on probleem: koodi käsitsi vormindamine võib olla täielik piin ja väga vigane. Sellised tööriistad nagu Prettier muudavad HTML-i, CSS-i, JavaScripti ja muude keelte vormindamise palju lihtsamaks. Avastage, kuidas installida ja kasutada koodi vormindamiseks laiendust Prettier, samuti mõningaid täpsemaid konfiguratsiooniseadeid.

Ilusama paigaldamine

Enne jätkamist veenduge, et teie arvutisse on installitud Node.js. Uusima versiooni saate installida saidilt ametlik Node.js allalaadimise leht. See tuleb kaasa sõlme paketihaldur (npm) sisseehitatud, mida kasutate oma Node.js pakettide haldamiseks.

Kui olete kinnitanud, et Node.js on kohapeal installitud, alustage oma projekti jaoks tühja kataloogi loomisega. Saate kataloogile nime anda

ilusam-demo.

Seejärel sisestage käsurea abil cd sellesse kataloogi ja käivitage Node.js projekti lähtestamiseks järgmine käsk:

npm init -y

See käsk loob faili package.json, mis sisaldab vaikesätteid.

Laienduse Prettier installimiseks käivitage see terminalikäsk:

npm i --save-dev ilusam

The --save-dev lipp installib ilusamini arendaja sõltuvusena, mis tähendab, et seda kasutatakse ainult arenduse ajal.

Nüüd, kui see on installitud, saate alustada uurimist, kuidas Prettier töötab, kasutades seda käsureal.

Prettieri kasutamine käsurea kaudu

Alustage a script.js fail ja täitke see järgmise koodiga:

funktsioonisumma(a, b) { tagasi a + b }
konst kasutaja = { nimi: "Kyle", vanus: 27,
 isProgrammeerija: tõsi,
 longKey: "Väärtus",
 rohkemAndmeid: 3
}

Selles failis script.js oleva koodi vormindamiseks käsurea kaudu käivitage järgmine käsk:

npx ilusam --write script.js

Käsk vormindab JavaScripti koodi failis script.js ümber Prettieri vaikestandardiks. See saab olema tulemus:

funktsioonisumma(a, b) {
tagasi a + b;
}
konst kasutaja = {
 nimi: "Kyle",
 vanus: 27,
 isProgrammeerija: tõsi,
 longKey: "Väärtus",
 rohkemAndmeid: 3,
};

HTML-märgistust saate vormindada ka käsurealt. Loo an index.html fail samas kataloogis script.js. Seejärel kleepige faili järgmine halvasti vormindatud HTML:

"" alt=""klass="ilmaikoon suur">

klass="praegune päise temperatuur"><ulatus>21ulatus></div>
</div>
 </header>

HTML-i vormindamiseks käivitage see käsk:

npx ilusam -- kirjutage index.html

See käsk vormindab HTML-i ümber Prettieri vaikestandardiks, mille tulemuseks on järgmine kood:

<päis>
<div>
<imgsrc=""alt=""klass="ilmaikoon suur" />
<divklass="praegune päise temperatuur"><ulatus>21ulatus>div>
div>
päis>

Võite kasutada ka --Kontrollima lipp, et kontrollida, kas kood vastab Prettieri standarditele. Järgmine näide kontrollib script.js:

npx ilusam -- kontrollige script.js

See on kasulik, kui soovite sidumiseelset konksu, mis tagab, et inimesed kasutavad Prettierit ja vormindavad faile enne nende Gitisse lükkamist. See toimib hästi, kui avatud lähtekoodiga panus.

Ilusama integreerimine Visual Studio koodi

Prettieri kasutamine käsurea kaudu võib olla valus. Selle asemel, et käivitada iga kord, kui soovite koodi vormindada, käsku käsitsi käivitada, saate seadistada selle faili muutmisel automaatselt vormindama. Õnneks on Visual Studio Code (VS Code) sisseehitatud viis seda teie eest teha.

Mine lehele Laiendused vahekaarti VS Code ja otsige Ilusam. Kliki Ilusam – koodi vormindaja, installige see ja seejärel lubage see.

Avage oma VS-koodi seaded, navigeerides aadressile Fail > Eelistused > Sätted. Otsige otsingukastist Ilusam. Leiate hulga valikuid, mis aitavad teil laienduse Prettier konfigureerida.

Tavaliselt saate vaikeseadetega hakkama. Ainus, mida võiksite muuta, on semikoolonid (saate need soovi korral eemaldada). Vastasel juhul on kõik vaikeseaded, kuid saate seda muuta, kuidas soovite.

Lubage kindlasti vormindamiseks salvestada nii, et iga faili kood vormindatakse selle faili salvestamisel automaatselt. Selle lubamiseks otsige lihtsalt vormindamiseks salvestada ja märkige ruut.

Kui te VSCode'i ei kasuta või laiendus mingil põhjusel ei tööta, saate seda teha laadige alla onchangi raamatukogu. See käivitab koodi vormindamise käsu igal ajal, kui faili muudate.

Kuidas kaunima vormindamisel faile ignoreerida

Kui sa jooksksid ilusamini -- kirjutada käsk kogu kaustas, läbiks see kõik teie sõlmemoodulid. Kuid te ei tohiks raisata aega teiste inimeste koodi vormindamiseks!

Selle probleemi lahendamiseks looge a .prettierignore faili ja lisage termin node_modules failis. Kui peaksite juhtima -- kirjutada käsk kogu kaustas, vormindaks see ümber kõik failid, välja arvatud need, mis asuvad kaustas node_modules kausta.

Samuti saate eirata kindla laiendiga faile. Näiteks kui soovite kõiki HTML-faile ignoreerida, lisage need lihtsalt *.html juurde .prettierignore.

Kuidas konfigureerida ilusamaks

Saate konfigureerida, kuidas soovite, et Prettier töötaks erinevate valikutega. Üks võimalus on lisada a ilusam võti sinu juurde package.json faili. Väärtus on objekt, mis sisaldab kõiki konfiguratsioonivalikuid:

{
 ...
"skriptid": {
"test": "echo \"Viga: testi pole määratud\" && välju 1"
 },
 ilusam: {
// valikud lähevad siia
 }
}

Teine võimalus (mida soovitame) on luua a .prettierrc faili. See fail võimaldab teil teha igasuguseid kohandusi.

Oletame, et sulle ei meeldi semikoolonid. Saate need eemaldada, asetades faili järgmise objekti:

{
"pool": tõsi,
"alistab": [
 {
"failid": ".ts",
"valikud": {
"pool": vale
 }
 }
 ]
}

The alistab atribuut võimaldab teil määrata teatud failide või faililaiendite jaoks kohandatud alistamise. Sel juhul ütleme, et kõik failid, mis lõpevad numbritega .ts (st masinakirjafailid) ei tohiks sisaldada semikooloneid.

Prettier kasutamine ESLintiga

ESLint on tööriist JavaScripti koodi vigade tuvastamiseks ja selle vormindamiseks. Kui kasutate Prettierit, ei sooviks te tõenäoliselt ka ESLinti vormindamiseks kasutada. Nende koos kasutamiseks peate installima ja seadistama eslint-config-prettier. See tööriist lülitab välja kõik ESLinti konfiguratsioonid asjade puhul, mida Prettier juba käsitleb.

Esiteks peate selle installima:

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

Järgmisena lisage see laienduste loendisse .eslintrc fail (veenduge, et see oleks loendis viimane):

{
"pikendab": [
"some-other-config-you-use",
"ilusam"
 ],
"reeglid": {
"taane": "viga"
 }
}

Nüüd keelab ESLint konfliktide vältimiseks kõik reeglid, mille järgi Prettier juba hoolitseb.

Puhastage oma koodibaasi Prettieri ja ESLintiga

Prettier on ideaalne tööriist koodi puhastamiseks ja järjepideva vormingu jõustamiseks projekti sees. Selle VS-koodiga töötama seadmine tähendab, et see on alati käeulatuses.

ESLint on kohustuslik JavaScripti tööriist, mis käib käsikäes Prettieriga. See pakub palju funktsioone ja kohandamisvalikuid, mis ulatuvad põhivormingust kaugemale. Siit saate teada, kuidas ESLinti JavaScriptiga kasutada, kui soovite olla produktiivsem arendaja.