Kaip nustatyti gražiau „Visual Studio Code“.

Labai svarbu rašyti švarų ir skaitomą kodą, nesvarbu, ar dirbate vienas, ar su kūrėjų komanda. Nors daugelis veiksnių prisideda prie kodo skaitomumo, vienas iš svarbiausių yra nuoseklus kodo formatavimas.

Tačiau čia yra problema: rankinis kodo formatavimas gali būti absoliučiai varginantis ir labai linkęs į klaidas. Įrankiai, tokie kaip Prettier, labai palengvina HTML, CSS, JavaScript ir kitų kalbų formatavimą. Sužinokite, kaip įdiegti ir naudoti „Prettier“ plėtinį kodo formatavimui, taip pat kai kuriuos išplėstinius konfigūracijos nustatymus.

Įdiegti gražiau

Prieš tęsdami įsitikinkite, kad jūsų kompiuteryje įdiegtas Node.js. Galite įdiegti naujausią versiją iš oficialus Node.js atsisiuntimų puslapis. Jis ateina su mazgo paketų tvarkyklė (npm) įtaisytasis, kurį naudosite tvarkydami Node.js paketus.

Patvirtinę, kad Node.js įdiegtas vietoje, pradėkite sukurdami tuščią savo projekto katalogą. Galite pavadinti katalogą gražesnė-demo.

Tada naudodami komandinę eilutę įveskite cd į tą katalogą, tada paleiskite šią komandą, kad inicijuotų Node.js projektą:

npm init -y

Ši komanda sukuria paketą.json failą, kuriame yra numatytieji nustatymai.

Norėdami įdiegti „Prettier“ plėtinį, paleiskite šią terminalo komandą:

npm i --save-dev gražesnis

The --save-dev vėliavėlė įdiegiama gražiau kaip kūrėjo priklausomybė, tai reiškia, kad ji naudojama tik kuriant.

Dabar, kai jį įdiegėte, galite pradėti tyrinėti, kaip veikia Prettier, naudodami jį komandinėje eilutėje.

„Prettier“ naudojimas per komandinę eilutę

Pradėkite kurdami a script.js failą ir užpildykite jį tokiu kodu:

funkcijasuma(a, b) { grąžinti a + b }
konst vartotojas = { vardas: "Kyle", amžiaus: 27,
 isProgrammer: tiesa,
 longKey: "vertė",
 daugiauDuomenų: 3
}

Norėdami suformatuoti kodą šiame script.js faile naudodami komandinę eilutę, paleiskite šią komandą:

npx gražesnis --write script.js

Komanda performatuoja JavaScript kodą script.js į Prettier numatytąjį standartą. Tai bus rezultatas:

funkcijasuma(a, b) {
grąžinti a + b;
}
konst vartotojas = {
 vardas: "Kyle",
 amžius: 27,
 isProgrammer: tiesa,
 longKey: "vertė",
 daugiauDuomenų: 3,
};

Taip pat galite formatuoti HTML žymėjimą iš komandinės eilutės. Sukurti an index.html failą tame pačiame kataloge kaip script.js. Tada į failą įklijuokite šį prastai suformatuotą HTML:

"" alt=""klasė=„didelė orų piktograma“>

klasė="currentHeaderTemp"><tarpas>21tarpas></div>
</div>
 </header>

Norėdami suformatuoti HTML, paleiskite šią komandą:

npx gražesnis --write index.html

Ši komanda performatuoja HTML į numatytąjį Prettier standartą, todėl gaunamas toks kodas:

<antraštę>
<div>
<imgsrc=""alt=""klasė=„didelė orų piktograma“ />
<divklasė="currentHeaderTemp"><tarpas>21tarpas>div>
div>
antraštę>

Taip pat galite naudoti --patikrinti vėliavėlę, kad patikrintumėte, ar kodas atitinka Prettier standartus. Toliau pateiktame pavyzdyje tikrinama script.js:

npx gražesnis – patikrinkite script.js

Tai naudinga, jei norite išankstinio patvirtinimo, kad žmonės naudotų Prettier ir suformatuotų failus prieš siųsdami juos į Git. Tai gerai veikia, kai prisideda prie atvirojo kodo.

Gražesnio integravimas į Visual Studio kodą

„Prettier“ naudojimas per komandinę eilutę gali būti skausmingas. Užuot rankiniu būdu vykdydami komandą kiekvieną kartą, kai norite formatuoti kodą, galite nustatyti, kad ji formatuotų automatiškai, kai keičiate failą. Laimei, „Visual Studio Code“ (VS kodas) turi integruotą būdą tai padaryti už jus.

Eikite į Plėtiniai skirtuką VS Code ir ieškokite Gražesnis. Spustelėkite Gražesnis – kodo formatavimo priemonė, įdiekite, tada įgalinkite.

Eikite į savo VS kodo nustatymus naršydami į Failas > Nuostatos > Nustatymai. Paieškos laukelyje ieškokite Gražesnis. Rasite daugybę parinkčių, padėsiančių sukonfigūruoti „Prettier“ plėtinį.

Paprastai galite apsieiti su numatytaisiais nustatymais. Vienintelis dalykas, kurį galite apsvarstyti, yra kabliataškiai (jei norite, galite juos pašalinti). Kitu atveju viskas bus nustatyta pagal numatytuosius nustatymus, bet jūs galite tai pakeisti, kaip norite.

Būtinai įjunkite formatuoti išsaugoti parinktį, kad kiekvieno failo kodas būtų automatiškai suformatuotas, kai įrašote tą failą. Norėdami jį įjungti, tiesiog ieškokite formatuoti išsaugoti ir pažymėkite langelį.

Jei nenaudojate VSCode arba plėtinys dėl kokių nors priežasčių neveikia, galite Atsisiųskite onchange biblioteką. Tai paleidžia kodo formatavimo komandą, kai tik keičiate failą.

Kaip nepaisyti failų formatuojant naudojant gražiau

Jei bėgtum gražiau --rašyk komandą visame aplanke, ji eis per kiekvieną jūsų mazgo modulį. Tačiau neturėtumėte gaišti laiko formatuodami kitų žmonių kodą!

Norėdami išspręsti šią problemą, sukurkite a .prettierignore failą ir įtraukite terminą mazgų_moduliai byloje. Jei paleisti --rašyk komandą visame aplanke, ji iš naujo suformatuotų visus failus, išskyrus esančius mazgų_moduliai aplanką.

Taip pat galite nepaisyti failų su konkrečiu plėtiniu. Pavyzdžiui, jei norite nepaisyti visų HTML failų, tiesiog pridėkite *.html į .prettierignore.

Kaip sukonfigūruoti gražiau

Galite konfigūruoti, kaip norite, kad Prettier veiktų su įvairiomis parinktimis. Vienas iš būdų yra pridėti a gražesnė raktas į tavo package.json failą. Vertė bus objektas su visomis konfigūracijos parinktimis:

{
 ...
"scenarijai": {
"bandymas": "echo \"Klaida: nenurodytas testas\" && išeiti 1"
 },
 graziau: {
// parinktys eikite čia
 }
}

Antrasis variantas (kurį rekomenduojame) – sukurti a .prettierrc failą. Šis failas leis jums atlikti įvairius tinkinimus.

Tarkime, jums nepatinka kabliataškiai. Galite juos pašalinti į failą įdėję šį objektą:

{
"pusiau": tiesa,
"nepaiso": [
 {
"failai": ".ts",
"galimybės": {
"pusiau": klaidinga
 }
 }
 ]
}

The nepaiso ypatybė leidžia apibrėžti pasirinktinius tam tikrų failų ar failų plėtinių nepaisymus. Šiuo atveju sakome, kad visi failai baigiasi .ts (ty mašinraščio failuose) neturėtų būti kabliataškių.

„Prettier“ naudojimas su ESLint

ESLint yra klijavimo įrankis, skirtas aptikti klaidas JavaScript kode ir jį formatuoti. Jei naudojate Prettier, tikriausiai nenorėtumėte naudoti ir ESLint formatavimui. Norėdami juos naudoti kartu, turėsite įdiegti ir nustatyti eslint-config-prettier. Šis įrankis išjungia visas ESLint konfigūracijas dalykams, kuriuos jau tvarko Prettier.

Pirmiausia turite jį įdiegti:

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

Tada pridėkite jį prie plėtinių sąrašo .eslintrc failą (įsitikinkite, kad tai paskutinis dalykas sąraše):

{
"pratęsia": [
„kita-kita-konfigūracija-jūsų-naudoti“,
"gražiau"
 ],
"taisyklės": {
"įtrauka": "klaida"
 }
}

Dabar ESLint išjungs visas taisykles, kuriomis Prettier jau rūpinasi, kad išvengtų konfliktų.

Išvalykite savo kodų bazę naudodami Prettier ir ESLint

Prettier yra ideali priemonė, skirta išvalyti kodą ir užtikrinti nuoseklų projekto formatavimą. Nustačius, kad jis veiktų su VS kodu, jis visada pasiekiamas.

ESLint yra būtinas JavaScript įrankis, kuris eina kartu su Prettier. Jame pateikiama daugybė funkcijų ir tinkinimo parinkčių, kurios neapsiriboja pagrindiniu formatavimu. Sužinokite, kaip naudoti ESLint su JavaScript, jei norite būti produktyvesnis kūrėjas.