Hoidke oma koodi puhtana

Koodi vormindamine näib olevat tühine teema, kuid see võib midagi mõjutada teie koodi kvaliteeti ja õigsust, seda, kuidas seda versioon kontrollib ja kuidas te teistega koostööd teete. Kui te ei soovi end üksikasjalikult uurida, kuhu iga viimane klamber kulgeb, proovige probleem tellida avatud lähtekoodiga tööriistale Prettier.

Vormindamine

Tarkvaraarenduse meeskonnad on kogu ajaloo vältel raisanud lugematuid tunde, arutledes maksimaalse joone pikkuse üle või selle üle, millisel joonel peaks traksidega minema. Ükskõik, mida isiklik eelistus ütleb, nõustub enamik inimesi vähemalt ühes asjas: koodi vormindamine peaks olema projekti jooksul ühtlane.

Prettier on selle saavutamiseks loodud tööriist. Andke talle kood ja see annab sama koodi järjekindlalt vormindatult tagasi. Prettieril on tekstiredaktori integreerimine, käsurea tööriist ja veebidemo.

Õige keele rääkimine

Kõigepealt tahate teada, kas Prettier ühildub keelega või keeltega, millega tavaliselt töötate. Prettier on praegu keskendunud peamistele keeltekomplektidele, mis on peamiselt pühendatud esiotsa veebiarendusele, sealhulgas:

• JavaScripti
• HTML
• CSS
• Sass
• Märgistamine
• YAML

Pluginate kaudu on avatud ka täiendav keelte tugi.

Proovige võrgus mänguväljaku abil ilusamat

Enne kui proovite isegi Prettieri installida, võiksite seda vaadata mänguväljak. Veebiliidese abil saate kleepida mõne näite koodi ja jälgida, kuidas Prettier selle teisendab. See on suurepärane viis mulje saamiseks selle kohta, mida tööriist tegelikult teeb, kuid see võib olla ka teie peamine meetod Prettieri kasutamiseks, kui teie nõuded on kergemal küljel.

Vaikimisi peaks mänguväljak välja nägema nagu kaks põhitekstiredaktori paneeli, üks vasakpoolne sisendi jaoks, teine ​​paremal ja näitab Prettieri väljundit. Esialgu näete mõnda näidiskoodi, kuid võite selle kõik lihtsalt eemaldada ja kleepida oma.

Näiteks proovige sisestada järgmine JavaScripti:

(funktsioon ()
{
window.alert ('ok')
}())

Ilusam peaks selle muutma:

(funktsioon () {
window.alert ("ok");
})();

Vaikimisi pange tähele, et Prettieri tehtud muudatused hõlmavad järgmist:

• Ühe tsiteeritud stringide teisendamine topelt tsiteeritud stringideks
• Semikoolonite lisamine
• Taanete teisendamine kaheks tühikuks

Vasakus alanurgas on nupp, mis võimaldab teil suvandeid vaadata. Eelmise näite abil proovige vahelehe laiust reguleerida, lülitades - üks tsiteerida lipu all Sagevõi selle vahetamine - pooleldi lipu all JavaScripti.

Valikute seadistamine

Ilusamat kirjeldatakse ise kui “arvamuslikku”, sihilik disainivalik, mis tähendab, et lihtsuse ja järjepidevuse nimel ohverdatakse kontroll eripärade üle. See on mõeldud teie seadistamiseks, seejärel unustamiseks, mitte sellepärast, et jääksite oma koodi viimaste vormindusdetailidega murelikuks. (Kui soovite alternatiivi, kus on palju täpsemat kontrolli iga viimase vormindusdetaili üle, proovige eslint.)

Kuid autorid tunnistavad ka seda, et mõnel otsusel on funktsionaalne mõju peale selle, kuidas kood välja näeb. Mõned valikud - sealhulgas mõned pärandieesmärkidel - jäävad alles, nii et peaksite vähemalt aru saama, mida nad teevad, isegi kui kasutate Prettieri vaikeseisundis.

Parim viis juhtimiseks Ilusamad valikud on salvestada need konfiguratsioonifaili. Selle korraldamiseks on palju võimalusi, kuid alustage nimega faili loomisest .prettierrc.json oma kohaliku projekti kataloogis. See võib sisaldada mis tahes JSON-i standardobjekti toetatud suvandeid, nt.

{
"tabWidth": 8
}

Prettier loeb sama konfiguratsioonifaili olenemata sellest, kas käitate seda käsurea või toetatud tekstiredaktori kaudu.

Lõnga või npm abil peaks paigaldamine olema lihtne. Lõnga jaoks:

$ lõng globaalne lisada ilusam

Ja npm:

$ npm install - globaalne ilusam

Kui olete Prettieri ülemaailmselt installinud, peaksite saama kirjutada:

$ ilusam

Vaikimisi kuvatakse ekraanil abitekst, mis kinnitab, et tööriist on installitud ja töötab õigesti.

Faili puhastamine

Faili vormindamiseks kasutage järgmist käsku:

$ ilusam - kirjuta failinimi.js

See kirjutab originaalfaili üle, mis on sageli kõige mugavam lähenemisviis. Teise võimalusena võite lihtsalt soovida, et projekti kõigi failidega toimiks ilusam:

$ ilusam - kirjuta.

Prettier töötab kõikides kataloogi all olevates failides, vormindades kõik need, mida ta tunneb.

Tulemuse saate printida ka standardväljundisse, selle asemel, et muuta algset faili, mis võimaldab teil väljundi salvestada teise faili või suunata mujale:

$ ilusam test.js> test2.js

Faili kontrollimine

Kui soovite oma koodi puhtuse kohta ilusamat aruannet muudatusi tegemata, kasutage --Kontrollima kas ühe või mitme failinimega lipp:

$ ilusam - kontroll.

Iga faili jaoks, mis ei vasta eeldatavale vormingule, saate Prettieri konfiguratsiooni järgi rea väljundi:

Vormingu kontrollimine ...
[hoiatama] .pretierrc
[hoiatama] .prettierrc.json
[hoiatus] Ülaltoodud failidest leidub koodistiiliga seotud probleeme. Unustasite Prettieri käivitada?

Käsurea suvandid

Prettieri standardvalikud on saadaval käsurea suvanditena, kui neid vajate. Siin on näide selle kohta, kuidas - üks tsiteerida lipp mõjutab väljundit:

$ ilusam tmp.js
funktsiooni näide () {
console.log ("tere, maailm");
}
$ ilusam - üks-tsiteeri tmp.js
funktsiooni näide () {
console.log ('tere, maailm');
}

Abi saamine

Käsurea tööriist pakub informatiivset abi mis tahes suvandite kohta - aidata lipp:

$ ilusam - aita lõpukoma
- järelkoma 
Mitmerealise printimise korral printige lõpukoma alati, kui see on võimalik.
Kehtivad valikud:
es5 Koma, kui see kehtib ES5-s (objektid, massiivid jne)
puudub Järgnevad komad.
kõik järelkoma võimaluse korral (sh funktsiooniargumendid).
Vaikimisi: es5

Tekstiredaktori kasutamine

Kui olete Prettieri installinud, saate seda kasutada mitmesugustes stsenaariumides, olenevalt sellest, millist tööriistakomplekti te juba kasutate. Võimalik, et kasutate tekstiredaktorit. Prettieril on enamiku populaarsete köiteid, nii et kolm neist saab seadistada järgmiselt.

Ülev tekst

JsPrettier on Sublime Text plugin, mis muudab Pretteri redaktoris kättesaadavaks. Kuigi JsPrettieri installimiseks on mitu erinevat viisi, soovitame kasutada paketikontrolli meetodit. Peate juba installima Prettier, seejärel avage Sublime Text'i käsupalett ja valige „Package Control: Install Package”:

Seejärel otsige sõna „jsprettier” ja klõpsake selle installimiseks:

Kui JsPrettier on installitud, saate selle vormindamiseks paremklõpsata mis tahes avatud failis. Samuti saate määrata väärtuse auto_format_on_save kuni tõsi JsPrettieri seadetes, mille tulemusel JsPrettier puhastab kõik ühilduvad failid automaatselt, kui salvestate need Sublime Text'i.

Aatom

Atomi installimine on väga sarnane Sublime Textiga: installimiseks kasutage lihtsalt redaktori sisseehitatud paketihaldurit ilusam aatom:

Pärast installimist on kasutamine tuttav: otsetee või menüüelement võimaldab teil vajadusel faili vormindada, Atomi säte võimaldab teil faili salvestamisel automaatselt käitada Prettier.

Vim

Vim on väga võimas käsureal põhinev redaktor, mis ei sobi algajatele. Vimiga ilusamaks töötamine on asjakohaselt keeruline, kuid see on siiski vaid mõni samm:

mkdir -p ~ / .vim / pack / plugins / start
git kloon https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-ilusam

Git on ilmselt kõige lihtsam viis vajalike failide allalaadimiseks, kuid mis tahes viis, kuidas sellesse stardikataloogi vim-ilusamaks saada peaks selle töö ära tegema.

Pärast installimist töötab Prettier automaatselt, kui fail on vi-sse salvestatud. Seda saab ka igal ajal käsitsi käivitada Ilusam käsk:

Selle tulemuseks peaks olema puhastatud fail:

Integreerige ilusam oma projekti

Koodivormingu, näiteks Prettier, kasutamine aitab hõlpsamini loetavat koodibaasi säilitada. Samuti võib see aidata kõrvale jätta arutelusid selle üle, millist konkreetset stiili kodeerimisel kasutada - lihtsalt tellige need otsused Prettierile!

Lõpuks saab luua konksu konksu, et kood saaks alati puhastada, kui see on pühendatud teie projekti hoidlasse. Üksikud arendajad võivad oma koodi vormistada vabalt, kui soovivad, kuid keskne koopia on alati puhas ja järjepidev.

nano vs. Vim: Parimad terminali tekstiredaktorid, võrreldes sellega

Kas otsite Linuxi jaoks terminalitekstiredaktorit? Peamine valik on Vimi ja nano vahel! Siit saate teada, kuidas nad võrdlevad.

Autori kohta