Fnug ikke bare din kode - ordne den med Prettier

Linting gør vores liv lettere, fordi det fortæller os, hvad der er galt med vores kode. Men hvordan kan vi undgå at udføre det egentlige arbejde, der går i at ordne det?

Tidligere skrev jeg om fnug, hvad det er, og hvordan det gør dit liv lettere. I slutningen inkluderede jeg faktisk en måde, hvorpå du automatisk kunne rette din kode. Så hvorfor skriver jeg dette?

Hvad mener du med at ordne det?

Før vi ruller ind i det, lad os ramme dette hurtigt. Linters er effektive og giver en nem måde at scanne din kode for syntaksfejl, der kan føre til fejl. Eller de kan simpelthen hjælpe med at holde en codebase ren, sund og konsistent. Når det køres, viser det alle problemerne og lader dig gå igennem hver enkelt for at rette dem.

Hvis vi tager det til det næste niveau, vil nogle linters faktisk give dig mulighed for at videregive et argument til kommandoen, der kører linteren, der gør det muligt at rette det automatisk for dig. Dette betyder, at du ikke behøver at manuelt gå igennem og lave alle disse små hvide mellemrum og semikolon (tilføj dem!?) Tilpasser dig selv!

Så hvad mere kan jeg gøre for at ordne ting?

Hvis du allerede bruger fix-indstillingen, er det en god start. Men der er værktøjer derude, der er udviklet specifikt til at tackle dette problem ud over blot et flag i din kommando. Den, jeg skal dække, er Prettier.

Hvad er smukkere?

Pænere knytter sig til som en "opfattet kodeformatering." Det tager et input af din kode og output det i et ensartet format, der fjerner enhver af den originale kodestil. Det konverterer faktisk din kode til et syntaks-træ og omskriver det derefter ved hjælp af typografier regler, du og Prettier leverer sammen via din ESLint-konfiguration og Prettiers standardregler.

Du kan nemt bruge Prettier alene bare for at formatere din kode, hvilket fungerer fint. Men hvis du kombinerer dette med en underliggende ESLint-proces, får du både en kraftig linter og en kraftig fixer. Jeg vil vise dig, hvordan du får dem til at arbejde sammen.

Kom godt i gang med Prettier

Til denne gennemgang antager jeg, at du har ESLint konfigureret og konfigureret i en applikation. Især vil jeg fortsætte, hvor jeg slap i min tidligere gennemgang, hvor vi installerede ESLint til et React-program.

Derudover fortæller Prettier os lige fra starten, at det er en opfattet kodeformater. Du kan forvente, at den vil formatere din kode på en ensartet måde, men måske en anden måde, end du i øjeblikket har den konfigureret. Men vær ikke bekymret! Du kan tilpasse denne konfiguration.

Så hvad starter vi med? Vi har allerede:

  • Har installeret ESLint
  • Har tilføjet Babel som vores parser
  • Har tilføjet et plugin, der inkluderer React-konfigurationer

Lad os derefter komme i gang med at installere et par pakker:

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

Bemærk: kommandoen ovenfor ligner brugen npm. Hvis dit projekt ikke bruger yarn, skal du bytte ud til alt npmefter behov.

Ovenfor installerer vi:

  • pænere: kerne Pænere pakke og motor
  • prettier-lint: overfører det smukkere resultat til ESLint for at rette ved hjælp af din ESLint-konfiguration
  • prettier-eslint-cli: hjælper Prettier og ESLint med at arbejde sammen om forskellige filer på tværs af dit projekt

Og vi installerer dem som en dev-afhængighed, da vi ikke har brug for det uden for udvikling.

Konfiguration af din nye formater

Nu hvor vores pakker er installeret, kan vi konfigurere til yarnat køre denne kommando for os.

Tidligere oprettede vi et lintscript til at se sådan ud i vores package.json:

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

Vi vil lade det være, som det er, men vi vil gøre noget lignende og oprette et nyt script lige ved siden af ​​det, der kaldes formatvores formater Prettier:

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

Så hvad sker der der? Vi er:

  • Tilføjelse af et nyt script kaldet format, som vi kan køre somyarn format
  • Vi bruger vores prettier-eslint-clipakke til at køre formateringen for os
  • Vi passerer i vores ESLint-konfiguration placeret ved siden af ​​vores package.jsoni roden af ​​projektet (skift dette, hvis det er et andet sted)
  • Og endelig fortæller vi pænere at skrive alle matchende filer **/*.jseller alle JS-filer, den finder rekursivt gennem vores projekt

Skønheden her er, at vi videregiver i vores ESLint-konfiguration til Prettier. Det betyder, at vi kun skal opretholde en konfiguration for begge værktøjer, men vi udnytter stadig ESLint's fnugkraft sammen med Prettiers formateringskraft.

Kør din formater!

Nu hvor vi alle er klar, lad os køre det! Kør følgende:

yarn format 

og straks ser vi, at det fungerer:

Hej, min kode ser anderledes ud!

Som jeg nævnte tidligere, fortæller Prettier os lige op, det er en meningsfuld formater. Den leveres med sine egne regler, som sin egen ESLint-konfiguration, så den vil også gennemgå og foretage disse ændringer.

Forlad ikke din kode! I stedet kan du gennemgå ændringerne, se om det måske er fornuftigt at holde det på den måde (det vil være meget konsekvent) eller du kan opdatere din ESLint-konfiguration ( .eslintrc.js) for at overskrive de regler, du ikke kan lide. Dette er også en god måde at måske lære nogle nye ting, som du måske ikke havde forventet at blive fanget før.

Så hvor efterlader dette os?

Hvis du har fulgt indtil videre, har vi nu to kommandoer:

  • lint: som kontrollerer din kode for dig og fortæller dig, hvad der er galt
  • format: forsøger automatisk at løse problemerne for dig

Når du bruger disse i praksis, er dit bedste valg altid at løbe formatførst for at lade det forsøge at rette automatisk alt, hvad det kan. Kør derefter straks for lintat fange noget, som Prettier ikke kunne rette automatisk.

Hvad er det næste?

Nu hvor vi kan formatere vores kode automatisk, skal vi kunne rette vores kode automatisk!

Næste gang tager vi dette et skridt videre og opretter en gitkrog, der tillader, at dette kører, før du forpligter dig. Det betyder, at du aldrig behøver at bekymre dig om at glemme at køre dette igen!

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev

Oprindeligt offentliggjort på //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/