Turot savu kodu tīru ar glītāku

Koda formatēšana šķiet maznozīmīga tēma, taču tas var ietekmēt koda kvalitāti un pareizību, to, kā tā kontrolē versiju un kā jūs sadarbojaties ar citiem. Tomēr, ja nevēlaties iegūt sīkāku informāciju par to, kur iet pēdējie stiprinājumi, mēģiniet problēmu nodot atklātā pirmkoda rīkam Prettier.

Formatēšana ir svarīga

Programmatūras izstrādes komandas ir iztērējušas neskaitāmas stundas visā vēsturē, strīdoties par maksimālo līnijas garumu vai uz kuras līnijas jāieņem stiprinājums. Lai ko teiktu personīgās izvēles, lielākā daļa cilvēku piekrīt vismaz vienai lietai: koda formatējumam jābūt konsekventam visā projektā.

Prettier ir līdzeklis, kas paredzēts tā sasniegšanai. Dodiet tam kodu, un tas atdos to pašu kodu, kas formatēts konsekventā veidā. Prettier ir teksta redaktora integrācija, komandrindas rīks un tiešsaistes demonstrācija.

Pareizā valodā runājot

Pirmkārt, jūs vēlaties uzzināt, vai Prettier ir saderīgs ar valodu vai valodām, ar kurām parasti strādājat. Pašlaik Prettier ir koncentrējies uz galveno valodu kopu, kas galvenokārt veltīta priekšgala tīmekļa izstrādei, tostarp:

• JavaScript
• HTML
• CSS
• Sass
• Atlaide
• YAML

Izmantojot spraudņus, ir pieejams arī papildu valodu atbalsts papildu valodām.

Izmēģiniet glītāk, izmantojot tiešsaistes rotaļu laukumu

Pirms pat mēģināt instalēt programmu Prettier, ieteicams pārbaudīt rotaļu laukums. Izmantojot tīmekļa saskarni, varat ielīmēt kādu koda piemēru un novērot, kā Prettier to pārveidos. Tas ir lielisks veids, kā gūt priekšstatu par to, ko rīks faktiski dara, taču tas var darboties arī kā jūsu galvenā metode Prettier lietošanai, ja jūsu prasības ir vieglākajā pusē.

Pēc noklusējuma rotaļu laukumam jāizskatās kā diviem pamata teksta redaktora paneļiem - viens kreisajā pusē jūsu ievadei, viens labajā pusē, kurā redzama Prettier izeja. Sākotnēji jūs redzēsiet kādu koda paraugu, taču jūs varat visu noņemt un ielīmēt savā.

Piemēram, mēģiniet ievadīt šo JavaScript:

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

Skaistākam tas jāpārvērš:

(funkcija () {
logs.brīdinājums ("ok");
})();

Pēc noklusējuma ievērojiet, ka Prettier veiktās izmaiņas ietver:

• Pārvēršot vienas un pēdiņas virknes divās pēdiņās
• Pievienojot semikolu
• Ievilkumu pārveidošana divās atstarpēs

Apakšējā kreisajā stūrī ir poga, kas ļauj apskatīt opcijas. Izmantojot iepriekšējo piemēru, mēģiniet pielāgot cilnes platumu, pārslēdzot - viens citāts karogs zem Bieživai pārslēdzot - ne-daļēji karogs zem JavaScript.

Opciju konfigurēšana

Prettier tiek raksturots kā “viedoklis”, apzināta dizaina izvēle, kas nozīmē, ka vienkāršība un konsekvence tiek upurēta specifikas kontrolē. Tas ir paredzēts, lai jūs varētu iestatīt, pēc tam aizmirst, nevis būt aizņemts ar katru pēdējo koda formatēšanas detaļu. (Lai iegūtu alternatīvu ar daudz precīzāku kontroli pār katru pēdējo formatēšanas detaļu, mēģiniet eslint.)

Tomēr autori arī atzīst, ka dažiem lēmumiem ir funkcionāla ietekme, kas pārsniedz to, kā kods izskatās. Dažas iespējas, tostarp dažas mantotiem mērķiem, paliek, tāpēc jums vajadzētu vismaz saprast, ko viņi dara, pat ja jūs izmantojat Prettier noklusējuma stāvoklī.

Labākais veids, kā pārvaldīt Skaistākas iespējas ir saglabāt tos konfigurācijas failā. Ir daudz veidu, kā to organizēt, bet vispirms izveidojiet failu ar nosaukumu .prettierrc.json vietējā projekta direktorijā. Tas var saturēt jebkuru no atbalstītajām opcijām standarta JSON objektā, piem.

{
"tabWidth": 8
}

To pašu konfigurācijas failu Prettier nolasīs neatkarīgi no tā, vai to izmantojat, izmantojot komandrindu vai atbalstītu teksta redaktoru.

Izmantojot dziju vai ppm, uzstādīšanai jābūt vienkāršai. Dzijai:

$ dzija globālā pievienošana skaistāka

Un par npm:

$ npm instalēt - globāli skaistāk

Kad esat instalējis lietotni Prettier visā pasaulē, jums vajadzētu būt iespējai rakstīt:

$ skaistāk

Pēc noklusējuma jūs saņemsit palīdzības teksta ekrānu, kas apstiprinās, ka rīks ir instalēts un darbojas pareizi.

Faila tīrīšana

Lai formatētu failu, izmantojiet komandu, kas līdzīga:

$ skaistāk - uzrakstiet faila nosaukumu.js

Tas pārrakstīs sākotnējo failu, kas bieži ir visērtākā pieeja. Varat arī vienkārši vēlēties, lai skaistāk rīkotos ar katru projekta failu:

$ glītāk - rakstīt.

Prettier darbosies visos failos, kas atrodas pašreizējā direktorijā, formatējot visus tos, kurus tā atpazīst.

Rezultātu var arī izdrukāt standarta izvadē, nevis mainīt sākotnējo failu, kas ļauj saglabāt izvadi citā failā vai novirzīt to citur:

$ skaistāks test.js> test2.js

Faila pārbaude

Lai iegūtu labāku ziņojumu par koda tīrību, faktiski neveicot izmaiņas, izmantojiet --pārbaudiet karodziņš ar vienu faila nosaukumu vai daudziem:

$ glītāk - pārbaudiet.

Katram failam, kas neatbilst gaidītajam formātam, tiks parādīta izvades rinda atbilstoši Prettier konfigurācijai:

Notiek formatējuma pārbaude ...
[brīdināt] .prettierrc
[brīdināt] .prettierrc.json
[brīdināt] Kodu stila problēmas, kas konstatētas iepriekš minētajā failā (-os). Aizmirsāt palaist Prettier?

Komandrindas opcijas

Prettier standarta opcijas ir pieejamas kā komandrindas opcijas, ja tādas nepieciešamas. Lūk, piemērs, kā - viens citāts karodziņš ietekmē izvadi:

$ glītāks tmp.js
funkciju piemērs () {
console.log ("sveiki, pasaule");
}
$ smukāk --single-quote tmp.js
funkciju piemērs () {
console.log ('sveika, pasaule');
}

Palīdzības saņemšana

Komandrindas rīks sniedz informatīvu palīdzību par jebkuru opciju, izmantojot --palīdzēt karogs:

$ glītāk --palīdziet aiz komata
- piekabināšanas komats 
Ja iespējams, drukājiet pēdējos komatus, kad vien iespējams.
Derīgas iespējas:
es5 Aizmugures komati, ja tie ir derīgi ES5 (objekti, masīvi utt.)
neviens Nav komatu.
visi pēdējie komati, kur vien iespējams (ieskaitot funkciju argumentus).
Noklusējums: es5

Teksta redaktora izmantošana

Kad esat instalējis lietotni Prettier, varat to izmantot dažādos gadījumos atkarībā no tā, kuru rīku komplektu jūs jau izmantojat. Iespējams, jūs izmantojat teksta redaktoru. Skaistumam ir stiprinājumi lielākajai daļai populāro, tāpēc šeit ir norādīts, kā iestatīt trīs no tiem:

Cildens teksts

DžsPretjē ir Sublime Text spraudnis, kas padara Prettier pieejamu redaktorā. Lai gan JsPrettier instalēšanai ir vairāki dažādi veidi, iesakām izmantot pakotnes kontroles metodi. Jums jau būs jābūt instalētam Prettier, pēc tam atveriet Sublime Text komandu paleti un atlasiet “Package Control: Install Package”:

Pēc tam meklējiet “jsprettier” un noklikšķiniet, lai to instalētu:

Kad JsPrettier ir instalēts, varat ar peles labo pogu noklikšķināt uz jebkura atvērta faila, lai to formatētu. Varat arī iestatīt vērtību auto_format_on_save uz taisnība JsPrettier iestatījumos, kā rezultātā JsPrettier automātiski notīrīs visus saderīgos failus, kad tos saglabājat Sublime Text.

Atom

Atom instalēšana ir ļoti līdzīga Sublime Text: lai instalētu, vienkārši izmantojiet redaktora iebūvēto pakotņu pārvaldnieku smukāks-atoms:

Pēc instalēšanas lietošana ir pazīstama: saīsne vai izvēlnes vienums ļauj formatēt failu pēc pieprasījuma, savukārt Atom iestatījums ļauj automātiski palaist Prettier ikreiz, kad tiek saglabāts fails.

Vim

Vim ir ļoti spēcīgs komandrindas redaktors, kas nav piemērots iesācējiem. Labāk strādāt ar VIM ir pietiekami sarežģīti, taču tas joprojām ir tikai dažas darbības:

mkdir -p ~ / .vim / pack / plugins / start
git klons https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-glītāks

Iespējams, ka Git ir vienkāršākais veids, kā lejupielādēt nepieciešamos failus, bet jebkādi līdzekļi, kā iegūt vim-smukāku šajā sākuma direktorijā vajadzētu darīt darbu.

Pēc instalēšanas Prettier automātiski darbosies, kad fails tiks saglabāts vi. To var arī jebkurā laikā palaist manuāli, izmantojot Smukāk komanda:

Tā rezultātā būtu jāiztīra fails:

Integrējiet skaistāku savā projektā

Izmantojot koda formatētāju, piemēram, Prettier, varat uzturēt vieglāk lasāmu koda bāzi. Tas var arī palīdzēt izvairīties no debatēm par to, kādu konkrētu stilu izmantot kodēšanas laikā - vienkārši nododiet šos lēmumus ārpakalpojumam Prettier!

Visbeidzot, var izveidot git āķi, lai nodrošinātu, ka kods vienmēr tiek iztīrīts, kad tas ir piešķirts jūsu projekta krātuvei. Atsevišķi izstrādātāji var brīvi formatēt kodu, kā viņi vēlas, taču centrālā kopija vienmēr būs tīra un konsekventa.

nano vs. Vim: labākie termināla teksta redaktori, salīdzinot

Vai meklējat termināla teksta redaktoru operētājsistēmai Linux? Galvenā izvēle ir starp Vimu un nano! Lūk, kā viņi salīdzina.

Par autoru