Održavanje koda čistim s ljepšim

Oblikovanje koda čini se trivijalnom temom, ali to je nešto što može utjecati na kvalitetu i ispravnost vašeg koda, kako se kontrolira verzija i kako surađujete s drugima. Međutim, ako ne želite upasti u detalje o tome gdje ide svaka posljednja zagrada, pokušajte problem prenijeti na alat otvorenog koda, Prettier.

Stvaranje formatiranja

Timovi za razvoj softvera izgubili su bezbroj sati tijekom povijesti raspravljajući se o maksimalnoj duljini linije ili na koju liniju treba ići zagrada. Što god osobne preferencije govorile, većina se ljudi slaže barem u jednom: formatiranje koda mora biti dosljedno u cijelom projektu.

Prettier je alat dizajniran da to postigne. Dajte mu neki kôd i on će vam vratiti isti kôd, formatiran na dosljedan način. Prettier ima integraciju uređivača teksta, alat naredbenog retka i mrežni demo.

Govoreći pravi jezik

Prije svega, htjeli biste znati je li Prettier kompatibilan s jezikom ili jezicima s kojima obično radite. Prettier je trenutno usredotočen na temeljni skup jezika uglavnom posvećen front-end web razvoju, uključujući:

• JavaScript
• HTML
• CSS
• Sass
• Smanjenje
• YAML

Također postoji otvorena podrška za dodatne jezike putem dodataka.

Isprobajte ljepše pomoću internetskog igrališta

Prije nego što uopće pokušate instalirati Prettier, možda biste trebali provjeriti igralište. Pomoću web sučelja možete zalijepiti neki primjer koda i promatrati kako će ga Prettier transformirati. Ovo je izvrstan način stjecanja dojma o tome što alat zapravo radi, ali može poslužiti i kao primarna metoda za korištenje Prettiera, ako su vaši zahtjevi na lakšoj strani.

Prema zadanim postavkama, igralište bi trebalo izgledati kao dvije osnovne ploče uređivača teksta, jedna s lijeve strane za vaš ulaz, a druga s desne strane koja prikazuje Prettierov izlaz. U početku ćete vidjeti neki uzorak koda, ali sve to možete jednostavno ukloniti i zalijepiti u svoj.

Na primjer, pokušajte unijeti sljedeći JavaScript:

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

Ljepša bi ga trebala pretvoriti u:

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

Primijetite, prema zadanim postavkama promjene koje Prettier uključuje uključuju:

• Pretvaranje niza s jednim navodnikom u dvocitane
• Dodavanje zareza
• Pretvaranje uvlaka u dva razmaka

U donjem lijevom kutu nalazi se gumb koji omogućuje pregled opcija. S prethodnim primjerom pokušajte prilagoditi širinu jezička, prebacujući --jednostruki navodnik zastava pod Uobičajen, ili prebacivanje - ne-polu zastava pod JavaScript.

Konfiguriranje opcija

Prettier se sam opisuje kao „samouvjeren“, namjerni izbor dizajna što znači da se kontrola specifičnosti žrtvuje zbog jednostavnosti i dosljednosti. Dizajniran je za vas da ga postavite, a zatim zaboravite, umjesto da budete zaokupljeni svim posljednjim detaljima oblikovanja koda. (Pokušajte s alternativom s mnogo preciznijom kontrolom nad svakim posljednjim detaljem oblikovanja eslint.)

Međutim, autori također prepoznaju da neke odluke imaju funkcionalni utjecaj, osim kako izgleda kôd. Neke opcije - uključujući neke za naslijeđene svrhe - ostaju, pa biste barem trebali razumjeti što rade, čak i ako Prettier koristite u zadanom stanju.

Najbolji način upravljanja Ljepše opcije je spremiti ih u konfiguracijsku datoteku. Postoji mnogo načina da se to organizira, ali započnite stvaranjem datoteke s imenom .prettierrc.json u vašem lokalnom direktoriju projekta. Može sadržavati bilo koju od podržanih opcija u standardnom JSON objektu, npr.

{
"tabWidth": 8
}

Prettier će čitati istu konfiguracijsku datoteku bilo da je pokrećete putem naredbenog retka ili podržanog uređivača teksta.

Koristeći pređu ili npm, instalacija bi trebala biti jednostavna. Za pređu:

$ pređa globalno dodajte ljepše

A za npm:

$ npm install --global ljepši

Nakon što globalno instalirate Prettier, trebali biste moći upisati:

$ ljepše

Prema zadanim postavkama dobit ćete zaslon teksta pomoći koji će potvrditi da je alat instaliran i ispravno radi.

Čišćenje datoteke

Da biste ponovno formatirali datoteku, upotrijebite naredbu sličnu:

$ ljepše - napiši ime datoteke.js

Ovo će prebrisati izvornu datoteku, što je često najprikladniji pristup. Ili biste možda htjeli da ljepše djeluju na svaku datoteku u projektu:

$ ljepše --piši.

Prettier će se pokretati kroz sve datoteke u trenutnom direktoriju, formatirajući sve one koje prepoznaje.

Rezultat možete ispisati i na standardni izlaz, umjesto da mijenjate izvornu datoteku, što vam omogućuje spremanje rezultata u drugu datoteku ili preusmjeravanje negdje drugdje:

$ ljepši test.js> test2.js

Provjera datoteke

Da biste Prettier izvještavali o čistoći koda, a da zapravo niste unijeli nikakve promjene, upotrijebite --ček zastava s jednim nazivom datoteke ili s više njih:

$ ljepše --provjeri.

Dobit ćete liniju rezultata za svaku datoteku koja se ne podudara s očekivanim formatom, prema Prettierovoj konfiguraciji:

Provjera formatiranja ...
[upozoriti] .prettierrc
[upozoriti] .prettierrc.json
[upozoriti] Problemi sa stilom koda pronađeni u gornjim datotekama. Zaboravili ste voditi Prettier?

Opcije naredbenog retka

Prettierove standardne opcije dostupne su kao opcije naredbenog retka, ako ih trebate. Evo primjera kako --jednostruki navodnik zastavica utječe na izlaz:

$ ljepše tmp.js
primjer funkcije () {
console.log ("bok, svijete");
}
$ ljepši --jednostručni navodnik tmp.js
primjer funkcije () {
console.log ('bok, svijete');
}

Dobivanje pomoći

Alat naredbenog retka pruža informativnu pomoć o bilo kojoj opciji putem --Pomozite zastava:

$ ljepše - pomoćna zaostala zarez
--zatezna zarez 
Ispisujte zarez u zavojima gdje god je to moguće u više redova.
Valjane opcije:
es5 Zarez u zavoju ako vrijedi u ES5 (objekti, nizovi itd.)
nema Zaostali zarez.
sve prateće zareze gdje god je to moguće (uključujući argumente funkcije).
Zadano: es5

Korištenje uređivača teksta

Nakon što instalirate Prettier, možete ga koristiti u raznim scenarijima, ovisno o tome koji skup alata već koristite. Vjerojatno koristite uređivač teksta. Prettier ima vezove za većinu popularnih, pa evo kako postaviti tri od njih:

Uzvišeni tekst

JsPrettier je dodatak za Sublime Text koji Prettier čini dostupnim u uređivaču. Iako postoji nekoliko različitih načina instaliranja JsPrettiera, preporučujemo upotrebu metode upravljanja paketima. Morat ćete već instalirati Prettier, a zatim otvorite naredbenu paletu uzvišenog teksta i odaberite "Control Package: Install Package":

Zatim potražite "jsprettier" i kliknite da biste ga instalirali:

Jednom kada je JsPrettier instaliran, možete desnom tipkom miša kliknuti bilo koju otvorenu datoteku da biste je formatirali. Također možete postaviti vrijednost auto_format_on_save do pravi u postavkama JsPrettiera, što će rezultirati time da JsPrettier automatski očisti sve kompatibilne datoteke kad ih spremite u Sublime Text.

Atom

Instalacija za Atom vrlo je slična Sublimnom tekstu: za instalaciju jednostavno upotrijebite uređivač ugrađenog upravitelja paketa ljepši-atom:

Jednom instalirana upotreba je poznata: prečac ili stavka izbornika omogućuje vam formatiranje datoteke na zahtjev, dok postavka Atoma omogućuje automatsko pokretanje programa Prettier kad god se datoteka spremi.

Vim

Vim je vrlo moćan editor zasnovan na naredbenom retku koji nije prikladan za početnike. Poticanje ljepšeg rada s vimom prikladno je komplicirano, ali to je još samo nekoliko koraka:

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

Git je vjerojatno najlakši način za preuzimanje potrebnih datoteka, ali bilo koji način da vim-ljepši uđem u taj početni direktorij treba obaviti posao.

Jednom instaliran, Prettier će se automatski pokrenuti kad se datoteka spremi u vi. Također se može pokrenuti ručno u bilo koje vrijeme putem Ljepši naredba:

Što bi trebalo rezultirati očišćenom datotekom:

Integrirajte ljepše u svoj projekt

Upotreba programa za oblikovanje koda kao što je Prettier može vam pomoći u održavanju baze podataka koja je lakša za čitanje. Također vam može pomoći da zaobiđu rasprave o tome koji određeni stil koristiti prilikom kodiranja - samo prepustite te odluke tvrtki Prettier!

Konačno, git kuka se može postaviti kako bi se osiguralo da se kôd uvijek očisti kada je predan spremištu vašeg projekta. Pojedinačni programeri mogu slobodno formatirati svoj kod kako god žele, ali središnja će kopija uvijek biti čista i dosljedna.

nano vs. Vim: Najbolji terminalski urednici teksta, u usporedbi

Tražite li terminalni editor teksta za Linux? Glavni izbor je između Vima i nano-a! Evo kako se uspoređuju.

O autoru