Vzdrževanje vaše kode z lepšimi

Oblikovanje kode se zdi trivialna zadeva, vendar lahko nekaj vpliva na kakovost in pravilnost kode, kako se nadzira različica in kako sodelujete z drugimi. Če pa se nočete zaplesti v podrobnosti, kam gre vsaka zadnja oklepaja, poskusite težavo prenesti na odprtokodno orodje Prettier.

Zadeve oblikovanja

Skupine za razvoj programske opreme so skozi zgodovino zapravljale nešteto ur, ko so se prepirale o največji dolžini vrstice ali o tem, na katero linijo naj gre oklepaj. Kar koli pove osebna preferenca, se večina ljudi strinja vsaj v enem: oblikovanje kode mora biti v projektu dosledno.

Lepše je orodje, namenjeno temu. Dajte mu nekaj kode in vrnil vam bo isto kodo, oblikovano na dosleden način. Prettier ima integracijo urejevalnika besedil, orodje ukazne vrstice in spletno predstavitev.

Govorjenje pravega jezika

Najprej vas zanima, ali je Prettier združljiv z jezikom ali jeziki, s katerimi običajno delate. Prettier se trenutno osredotoča na osrednji nabor jezikov, ki so namenjeni predvsem razvoju spletnih strani, vključno z:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Na voljo je tudi odprta podpora za dodatne jezike prek vtičnikov.

Preizkusite lepše na spletnem igrišču

Preden poskusite namestiti Prettier, se morda odločite za ogled igrišče. S pomočjo spletnega vmesnika lahko prilepite nekaj primerov kode in opazujete, kako jo bo Prettier spremenil. To je odličen način, da dobite vtis o tem, kaj orodje dejansko počne, lahko pa deluje tudi kot vaša glavna metoda za uporabo Prettierja, če so vaše zahteve na lažji strani.

Privzeto mora biti igrišče videti kot dve osnovni plošči za urejanje besedila, ena na levi za vaš vnos, druga na desni, ki prikazuje Prettierjev izhod. Na začetku boste videli nekaj vzorčne kode, vendar lahko vse to preprosto odstranite in prilepite svojo.

Poskusite na primer vnesti naslednji JavaScript:

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

Lepša naj jo spremeni v:

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

Upoštevajte, da privzeto spremembe, ki jih naredi Prettier, vključujejo:

• Pretvorba nizov z enim narekovajem v dvojnike
• Dodajanje podpičja
• Pretvorba zamikov v dva presledka

Spodaj levo je gumb, ki vam omogoča ogled možnosti. V prejšnjem primeru poskusite prilagoditi širino jezička in preklopiti - enojna ponudba zastava pod Običajniali preklapljanje med - ne-pol zastava pod JavaScript.

Konfiguriranje možnosti

Lepšega samega sebe opisujejo kot "samozavestnega", namerno oblikovalsko izbiro, kar pomeni, da je nadzor nad posebnostmi žrtvovan zaradi preprostosti in doslednosti. Zasnovan je tako, da ga lahko nastavite in nato pozabite nanj, namesto da bi vas zanimala vsaka zadnja podrobnost oblikovanja kode. (Za alternativo z veliko natančnejšim nadzorom nad vsemi zadnjimi podrobnostmi oblikovanja poskusite eslint.)

Vendar pa avtorji priznavajo tudi, da imajo nekatere odločitve funkcijski vpliv, ki presega to, kako izgleda koda. Nekatere možnosti, vključno z nekaterimi za starejše namene, ostanejo, zato morate vsaj razumeti, kaj počnejo, tudi če uporabljate Prettier v privzetem stanju.

Najboljši način upravljanja Lepše možnosti je, da jih shranite v konfiguracijsko datoteko. Obstaja veliko načinov, kako to organizirati, vendar najprej začnite z ustvarjanjem datoteke z imenom .prettierrc.json v lokalnem imeniku projekta. Vsebuje lahko katero koli od podprtih možnosti v standardnem objektu JSON, npr.

{
"tabWidth": 8
}

Prettier bo prebral isto konfiguracijsko datoteko, ne glede na to, ali jo izvajate prek ukazne vrstice ali podprtega urejevalnika besedil.

Uporaba preje ali npm mora biti enostavna. Za prejo:

$ yarn globalno dodajte lepše

In za npm:

$ npm install --global lepši

Ko globalno namestite Prettier, bi morali imeti možnost vnašanja:

$ lepši

Privzeto boste dobili zaslon z besedilom pomoči, ki bo potrdil, da je orodje pravilno nameščeno in deluje.

Čiščenje datoteke

Če želite datoteko preoblikovati, uporabite ukaz, podoben:

$ prettier --write filename.js

To bo prepisalo izvirno datoteko, kar je pogosto najbolj priročen pristop. Druga možnost je, da boste morda želeli, da lepše deluje v vsaki datoteki v projektu:

$ lepše - piši.

Prettier bo tekel v vseh datotekah v trenutnem imeniku in formatiral vse tiste, ki jih prepozna.

Rezultat lahko natisnete tudi na standardni izhod, namesto da spremenite izvirno datoteko, ki vam omogoča, da izhod shranite v drugo datoteko ali jo preusmerite drugam:

$ lepši test.js> test2.js

Preverjanje datoteke

Če želite, da Prettier poroča o čistoči vaše kode, ne da bi dejansko spreminjal, uporabite --preveri zastava z enim ali več imeni datotek:

$ lepše - preverite.

Za vsako datoteko boste dobili izhodno vrstico, ki se ne ujema s pričakovano obliko, v skladu s Prettierjevo konfiguracijo:

Preverjanje oblikovanja ...
[opozorilo] .prettierrc
[opozorilo] .prettierrc.json
[opozorilo] Težave s slogom kode, najdene v zgornjih datotekah. Ste pozabili zagnati Prettier?

Možnosti ukazne vrstice

Standardne možnosti podjetja Prettier so na voljo kot možnosti ukazne vrstice, če jih potrebujete. Tu je primer, kako - enojna ponudba zastavica vpliva na izhod:

$ lepši tmp.js
primer funkcije () {
console.log ("zdravo, svet");
}
$ lepša - enojna kotacija tmp.js
primer funkcije () {
console.log ('živjo, svet');
}

Pridobivanje pomoči

Orodje ukazne vrstice nudi informativno pomoč za katero koli možnost prek - pomoč zastava:

$ lepša --pomoč končna vejica
--trailing-comma 
V več vrsticah natisnite zadnje vejice, kjer je to mogoče.
Veljavne možnosti:
es5 Vejice, kjer je veljavno v ES5 (predmeti, polja itd.)
noben Ni zarezov.
vse končne vejice, kjer je to mogoče (vključno z argumenti funkcije).
Privzeto: es5

Uporaba urejevalnika besedil

Ko namestite Prettier, ga lahko uporabljate v različnih scenarijih, odvisno od tega, kateri nabor orodij že uporabljate. Verjetno uporabljate urejevalnik besedil. Prettier ima vezi za večino priljubljenih, zato je tukaj trije:

Vzvišeno besedilo

JsPrettier je vtičnik Sublime Text, ki naredi Prettier na voljo v urejevalniku. Čeprav obstaja več različnih načinov namestitve JsPrettierja, priporočamo uporabo metode Package Control. Morali boste že namestiti Prettier, nato odprite ukazno paleto sublimnega besedila in izberite »Nadzor paketa: Namesti paket«:

Nato poiščite »jsprettier« in kliknite, da ga namestite:

Ko je JsPrettier nameščen, lahko z desno tipko miške kliknete katero koli odprto datoteko in jo formatirate. Nastavite lahko tudi vrednost auto_format_on_save do prav v nastavitvah JsPrettierja, zaradi česar bo JsPrettier samodejno očistil vse združljive datoteke, ko jih shranite v Sublime Text.

Atom

Namestitev za Atom je zelo podobna Sublime Text: za namestitev preprosto uporabite vgrajeni urejevalnik paketov lepši-atom:

Po namestitvi je uporaba že znana: bližnjica ali element menija omogoča oblikovanje datoteke na zahtevo, nastavitev Atom pa omogoča samodejni zagon programa Prettier vsakič, ko je datoteka shranjena.

Vim

Vim je zelo zmogljiv urejevalnik, ki temelji na ukazni vrstici in ni primeren za začetnike. Kako lepše delati z vimom, je primerno zapleteno, vendar je vseeno le nekaj korakov:

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

Git je verjetno najlažji način za prenos potrebnih datotek, vendar kakršen koli način za vim-lepše v tem začetnem imeniku bi moral opraviti delo.

Po namestitvi se bo Prettier samodejno zagnal, ko bo datoteka shranjena v vi. Prav tako ga je mogoče kadar koli zagnati ročno prek Lepše ukaz:

Iz tega bi nastala očiščena datoteka:

Vključite lepše v svoj projekt

Uporaba oblikovalnika kode, kot je Prettier, lahko pomaga ohranjati lažjo za branje kodno bazo. Pomaga lahko tudi izogibanje razpravam o tem, kateri slog uporabiti pri kodiranju - samo te odločitve oddajte podjetju Prettier!

Končno lahko nastavite kavelj git, da zagotovite, da se koda vedno očisti, ko je predana repozitoriju vašega projekta. Posamezni razvijalci lahko svobodno oblikujejo kodo, kakor želijo, vendar bo osrednja kopija vedno čista in dosledna.

nano vs. Vim: Primerjani najboljši urejevalniki besedil na terminalu

Iščete terminalski urejevalnik besedila za Linux? Glavna izbira je med Vim in nano! Tukaj je primerjava.

O avtorju