Home-theater-designers
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.
PÄEVA VIDEO MAKKEUSE SISUGA JÄTKAMISEKS KERIMISE
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.
mängud, mida telefoniga televiisorist mängida
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 prettier
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:
function sum(a, b) { return a + b }
const user = { name: "Kyle", age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3
}
Selles failis script.js oleva koodi vormindamiseks käsurea kaudu käivitage järgmine käsk:
npx prettier --write script.js
Käsk vormindab JavaScripti koodi failis script.js ümber Prettieri vaikestandardiks. See saab olema tulemus:
function sum(a, b) {
return a + b;
}
const user = {
name: "Kyle",
age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 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:
<header>
<div>
<img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
HTML-i vormindamiseks käivitage see käsk:
npx prettier --write index.html
See käsk vormindab HTML-i ümber Prettieri vaikestandardiks, mille tulemuseks on järgmine kood:
<header>
<div>
<img src="" alt="" class="weather-icon large" />
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
Võite kasutada ka --Kontrollima lipp, et kontrollida, kas kood vastab Prettieri standarditele. Järgmine näide kontrollib script.js :
npx prettier --check 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.
mida teha, kui teie iphone on Apple'i logo külge kinni jäänud
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:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
prettier: {
// options go here
}
}
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:
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
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):
kuidas nööpnõelad google mapsi panna
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
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.