Nemojte samo obložiti svoj kôd - popravite ga s Prettier

Povezivanje nam olakšava život jer nam govori što nije u redu s našim kodom. Ali kako možemo izbjeći stvarni posao koji ide u njegovo popravljanje?

Prije sam pisao o povezivanju, što je to i kako vam olakšava život. Na kraju sam zapravo uključio način na koji možete automatski popraviti svoj kod. Pa zašto ovo pišem?

Kako to misliš popraviti?

Prije nego što krenemo u nju, krenimo brzo. Linteri su snažni i pružaju jednostavan način skeniranja koda radi sintaksnih pogrešaka koje bi mogle dovesti do pogrešaka. Ili jednostavno mogu pomoći da baza kodova bude čista, zdrava i dosljedna. Kada se pokrene, prikazat će sve probleme i omogućiti vam da ih prođete pojedinačno da biste ih riješili.

Pomerajući to na sljedeću razinu, neki linteri će vam zapravo omogućiti da argument proslijedite naredbi koja izvodi linter koja mu omogućuje da to automatski popravi umjesto vas. To znači da ne morate ručno prolaziti i sami podešavati sve one male razmake i zareze (dodajte ih??)!

Pa što više mogu učiniti da popravim stvari?

Ako već koristite opciju popravka, to je dobar početak. Ali postoje alati koji su posebno razvijeni za rješavanje ovog problema, a ne samo zastava u vašoj naredbi. Ona koju ću pokriti je ljepša.

Što je ljepše?

Prettier se veže kao „samopouzdani oblikovač koda". Potreban je ulaz vašeg koda i on se prikazuje u dosljednom formatu uklanjajući bilo koji izvorni stil koda. Zapravo pretvara vaš kôd u stablo sintakse, a zatim ga prepisuje koristeći stilove i pravila koja vi i Prettier pružate zajedno putem vaše ESLint konfiguracije i zadataka Prettiera.

Jednostavno možete koristiti Prettier samo za formatiranje koda, što izvrsno funkcionira. Ali ako ovo kombinirate s osnovnim ESLint postupkom, dobit ćete i snažni linter i snažni popravljač. Pokazat ću vam kako to natjerati da rade zajedno.

Početak rada s ljepšim

U ovom koraku pretpostavit ću da ste ESLint postavili i konfigurirali u aplikaciji. Osobito ću nastaviti tamo gdje sam stao u svom prethodnom koraku, gdje smo instalirali ESLint u React aplikaciju.

Uz to napominjemo, Prettier nam od samog početka kaže da je to pouzdan program za oblikovanje koda. Trebali biste očekivati ​​da će oblikovati vaš kôd na dosljedan način, ali možda na drugačiji način nego što ga trenutno imate konfiguriran. Ali ne brinite! Možete podesiti ovu konfiguraciju.

Pa s čime počinjemo? Mi već:

  • Jeste li instalirali ESLint
  • Dodali smo Babel kao naš parser
  • Dodali su dodatak koji uključuje React konfiguracije

Dalje, krenimo s instaliranjem nekoliko paketa:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Napomena: naredba iznad slična je upotrebi npm. Ako vaš projekt ne koristi yarn, zamijenite ga prema npmpotrebi.

Iznad instaliramo:

  • ljepši: jezgra Ljepši paket i motor
  • prettier-lint: prosljeđuje rezultat Prettier ESLint-u kako bi ga popravio pomoću vaše ESLint-ove konfiguracije
  • prettier-eslint-cli: pomaže Prettieru i ESLintu da rade zajedno na raznim datotekama u vašem projektu

A mi ih instaliramo kao razvojnu ovisnost, jer nam to nije potrebno izvan razvoja.

Konfiguriranje vašeg novog oblikovača

Sad kad su instalirani naši paketi, možemo postaviti yarnpokretanje ove naredbe umjesto nas.

Prije smo postavili lintskriptu koja će izgledati ovako u našem package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

Ostavit ćemo to kako jest, ali učinit ćemo nešto slično i stvoriti novu skriptu odmah pokraj nje, formatpozvanu za naš formatter Prettier:

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

Pa što se tamo događa? Mi smo:

  • Dodavanje nove skripte pod nazivom format, koju možemo pokrenuti kaoyarn format
  • Koristimo naš prettier-eslint-clipaket za pokretanje formatiranja za nas
  • Prolazimo u našu ESLint konfiguraciju koja se nalazi pored naše package.jsonu korijenu projekta (promijenite ovo ako je na drugom mjestu)
  • I na kraju, ljepšem poručujemo da napiše sve datoteke koje se podudaraju **/*.jsili bilo koje JS datoteke koje rekurzivno pronađe kroz naš projekt

Ljepota je u tome što svoju ESLint konfiguraciju prosljeđujemo Prettieru. To znači da moramo održavati samo 1 konfiguraciju za oba alata, ali i dalje koristimo snagu povezivanja ESLinta zajedno snagom formatiranja Prettiera.

Pokrenite svoj program za oblikovanje!

Sad kad smo svi postavljeni, pokrenimo! Pokrenite sljedeće:

yarn format 

i odmah vidimo da to djeluje:

Hej, moj kod izgleda drugačije!

Kao što sam već spomenuo, Prettier nam izravno kaže da je to samopouzdani oblikovač. Dostavlja se s vlastitim pravilima, otprilike poput vlastite ESLint konfiguracije, pa će proći i unijeti i te promjene.

Ne napuštajte svoj kod! Umjesto toga, možete pregledati promjene, vidjeti ima li možda smisla da se tako i ostane (to će biti vrlo dosljedno) ili možete ažurirati svoj ESLint config ( .eslintrc.js) kako biste prepisali pravila koja vam se ne sviđaju. Ovo je također dobar način da možda naučite neke nove stvari za koje prije možda niste očekivali da će vas uhvatiti.

Pa gdje nas ovo ostavlja?

Ako ste dosad pratili, sada imamo dvije naredbe:

  • lint: koji će umjesto vas provjeriti vaš kôd i reći vam što nije u redu
  • format: automatski će pokušati riješiti probleme umjesto vas

Kada ih upotrebljavate u praksi, najbolje je uvijek trčati formatprvi kako biste pokušali automatski popraviti sve što je moguće. Zatim odmah trčite linti uhvatite sve što ljepša nije uspjela automatski popraviti.

Što je sljedeće?

Sada kada možemo automatski formatirati svoj kôd, trebali bismo moći automatski popraviti naš kôd!

Sljedeći put učinit ćemo ovaj korak dalje i postaviti gitudicu koja će omogućiti pokretanje prije nego što se obvežete. To znači da više nikada nećete morati brinuti hoćete li zaboraviti pokrenuti ovo!

Slijedite me za još Javascripta, UX-a i drugih zanimljivosti!

  • ? Slijedite me na Twitteru
  • ? Pretplatite se na moj Youtube
  • Up Prijavite se za moj bilten

Izvorno objavljeno na //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/