Linting ne face viața mai ușoară, deoarece ne spune ce este în neregulă cu codul nostru. Dar cum putem evita să facem treaba reală care urmează să o remediem?

Anterior am scris despre scame, ce este și cum îți ușurează viața. La final, am inclus de fapt o modalitate prin care îți poți repara automat codul. Deci, de ce scriu asta?

Ce vrei să spui?

Înainte de a intra în el, să lovim repede. Linters sunt puternice și oferă o modalitate ușoară de a vă scana codul pentru a găsi erori de sintaxă care ar putea duce la erori. Sau pot ajuta pur și simplu la menținerea unei baze de cod curate, sănătoase și coerente. Când rulați, va afișa toate problemele și vă va permite să treceți prin fiecare în parte pentru a le remedia.

Trecând la nivelul următor, unele lintere vă vor permite, de fapt, să treceți într-un argument la comanda care rulează linter-ul, care îi permite să îl repare automat. Aceasta înseamnă că nu trebuie să parcurgeți manual și să faceți toate micile spații albe și punct și virgulă (adăugați-le!?) Personalizate!

Nu va scapati doar codul remediati l cu Prettier
Ron Swanson fericit

Deci, ce mai pot face pentru a remedia lucrurile?

Dacă utilizați deja opțiunea de remediere, acesta este un început bun. Dar există instrumente care au fost dezvoltate special pentru a aborda această problemă dincolo de doar un steag în comanda ta. Cea pe care o voi acoperi este mai frumoasă.

Ce este Prettier?

Mai frumoasă se conectează ca „un formatator de cod opinionat”. Acesta ia o intrare a codului dvs. și îl scoate într-un format consistent, eliminând oricare din stilul de cod original. De fapt, convertește codul dvs. într-un arborele de sintaxă, apoi îl rescrie folosind stilurile și regulile pe care tu și Prettier le furnizați împreună prin configurația dvs. ESLint și regulile implicite ale lui Prettier.

Puteți utiliza cu ușurință Prettier singur doar pentru a vă formata codul, care funcționează foarte bine. Dar dacă combinați acest lucru cu un proces ESLint de bază, veți obține atât un linter puternic, cât și un fixer puternic. Vă voi arăta cum să le faceți să funcționeze împreună.

1612151471 171 Nu va scapati doar codul remediati l cu Prettier
Voltron

Noțiuni de bază cu Prettier

Pentru această prezentare, voi presupune că ați configurat și configurat ESLint într-o aplicație. În special, voi lua locul unde am rămas în ghidul meu anterior, unde am instalat ESLint într-o aplicație React.

În plus, de remarcat, Prettier ne spune încă de la început că este un formatator de cod avizat. Ar trebui să vă așteptați să vă formateze codul într-un mod consecvent, dar poate într-un mod diferit decât îl aveți configurat în prezent. Dar nu te frica! Puteți modifica această configurație.

Deci, cu ce începem? Noi deja:

  • Ați instalat ESLint
  • Au adăugat Babel ca analizor al nostru
  • Au adăugat un conecteaza care include configurații React

Apoi, să începem instalând câteva pachete:

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

Notă: comanda de mai sus este similară cu utilizarea npm. Dacă proiectul dvs. nu se folosește yarn, schimbă la npm Asa Potrivit.

Mai sus, instalăm:

  • mai frumoasă: pachet și motor Prettier de bază
  • mai frumos-scame: transmite rezultatul Prettier către ESLint pentru a remedia folosind configurația dvs. ESLint
  • prettier-eslint-cli: ajută Prettier și ESLint să lucreze împreună la diferite fișiere din proiect

Și le instalăm ca o dependență de dev, deoarece nu avem nevoie de ea în afara dezvoltării.

Configurarea noului dvs. formatator

Acum, când pachetele noastre sunt instalate, putem configura yarn pentru a rula această comandă pentru noi.

Anterior, am creat un lint script pentru a arăta așa în package.json:

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

Vom lăsa asta așa cum este, dar vom face ceva similar și vom crea un nou script chiar lângă el numit format pentru formatatorul nostru Prettier:

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

Deci, ce se întâmplă acolo? Suntem:

  • Adăugarea unui nou script numit format, că putem alerga ca yarn format
  • Ne folosim de noi prettier-eslint-cli pachet pentru a rula formatarea pentru noi
  • Trecem în configurația noastră ESLint situată lângă package.json în rădăcina proiectului (schimbați acest lucru dacă se află într-o altă locație)
  • Și, în cele din urmă, spunem mai frumos să scriem toate fișierele care se potrivesc **/*.js, sau orice fișiere JS pe care le găsește recursiv prin proiectul nostru

Frumusețea este că le transmitem configurația ESLint către Prettier. Acest lucru înseamnă că trebuie să menținem doar o configurație pentru ambele instrumente, dar ne folosim totuși de puterea de linting a ESLint împreună cu puterea de formatare a Prettier.

Rulați formatatorul!

Acum, că suntem cu toții pregătiți, să-l rulăm! Rulați următoarele:

yarn format

și imediat, vedem că funcționează:

Nu va scapati doar codul remediati l cu Prettier
Rularea cu succes a Prettier

Hei, codul meu arată diferit!

1612151471 222 Nu va scapati doar codul remediati l cu Prettier
Mafie furioasă cu furci

Așa cum am menționat mai devreme, Prettier ne spune direct, este un formatator avizat. Se livrează cu propriile reguli, ca și cum ar fi propria configurare ESLint, așa că va trece și va face și aceste modificări.

Nu vă abandona codul! În schimb, puteți revizui modificările, puteți vedea dacă poate are sens să le păstrați așa (va fi foarte consecvent) sau vă puteți actualiza configurația ESLint (.eslintrc.js) pentru a suprascrie regulile care nu vă plac. Aceasta este, de asemenea, o modalitate bună de a învăța, probabil, câteva lucruri noi pe care poate nu v-ați fi așteptat să le prindeți înainte.

Deci, unde ne lasă asta?

Dacă ați urmărit până acum, avem acum două comenzi:

  • lint: care vă va verifica codul pentru dvs. și vă va spune ce nu este în regulă
  • format: va încerca automat să rezolve problemele pentru dvs.

Atunci când le folosiți în practică, cel mai bun pariu este să alergați întotdeauna format mai întâi, lăsați-l să încerce să remedieze automat orice poate. Apoi fugi imediat lint pentru a prinde ceva ce Prettier nu a reușit să remedieze automat.

Ce urmeaza?

Acum, că ne putem formata codul automat, ar trebui să putem să reparăm codul nostru automat!

1612151471 192 Nu va scapati doar codul remediati l cu Prettier
Lui Eddie de la Fresh Off the Boat i-a trecut prin minte

Data viitoare vom face acest lucru un pas mai departe și vom configura un git cârlig care va permite acest lucru să ruleze înainte de a comite. Aceasta înseamnă că nu va trebui niciodată să vă faceți griji că uitați să rulați din nou!

Publicat inițial la https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/