Älä vain nukkaa koodiasi - korjaa se Prettierillä

Linting helpottaa elämäämme, koska se kertoo meille, mikä koodissamme on vialla. Mutta miten voimme välttää tekemästä varsinaista työtä, joka menee sen korjaamiseen?

Aikaisemmin kirjoitin nukkaamisesta, mikä se on ja miten se helpottaa elämääsi. Lopussa sisällytin itse asiassa tavan, jolla voit korjata koodisi automaattisesti. Joten miksi kirjoitan tämän?

Mitä tarkoitat korjata sen?

Ennen kuin ryhdymme siihen, osumme tähän nopeasti. Linters ovat tehokkaita ja tarjoavat helpon tavan skannata koodisi syntaksivirheiden varalta, jotka voivat johtaa virheisiin. Tai ne voivat yksinkertaisesti auttaa pitämään koodipohjan puhtaana, terveellisenä ja johdonmukaisena. Suoritettaessa se näyttää kaikki ongelmat ja antaa sinun käydä läpi kukin erikseen korjata ne.

Kun tämä siirretään seuraavalle tasolle, jotkut nuket antavat sinun välittää argumentin komennolle, joka suorittaa linterin, jonka avulla se voi korjata sen sinulle automaattisesti. Tämä tarkoittaa, että sinun ei tarvitse käydä manuaalisesti läpi ja tehdä kaikki nämä pienet välilyönnit ja puolipisteet (lisää ne!?) Itse!

Joten mitä voin tehdä korjata asiat?

Jos käytät jo korjausvaihtoehtoa, se on hyvä alku. Mutta siellä on työkaluja, jotka on kehitetty nimenomaan tämän ongelman ratkaisemiseksi pelkän komennon lipun lisäksi. Se, jonka aion kattaa, on kauniimpi.

Mikä on kauniimpi?

Kauniimpi nasta itsensä "mielipiteellisenä koodin muotoilijana". Se vie koodisi syötteen ja tuottaa sen yhtenäisessä muodossa poistamalla minkä tahansa alkuperäisen koodityylin. Se muuntaa koodisi syntaksipuuksi ja kirjoittaa sen uudelleen tyylien ja säännöt, jotka sinä ja Prettier tarjoat yhdessä ESLint-määrityksen ja Prettierin oletussääntöjen kautta.

Voit helposti käyttää Prettier-ohjelmaa pelkästään muotoillaksesi koodisi, mikä toimii hienosti. Mutta jos yhdistät tämän taustalla olevaan ESLint-prosessiin, saat sekä tehokkaan säkin että tehokkaan korjaimen. Näytän sinulle, kuinka saada ne toimimaan yhdessä.

Aloittaminen Prettierin kanssa

Tätä läpikäyntiä varten oletan, että sinulla on ESLint määritetty ja määritetty sovelluksessa. Erityisesti aion jatkaa siitä, mihin jäin edellisessä läpikäynnissäni, johon asensimme ESLint React -sovellukseen.

Lisäksi on huomattava, että Prettier kertoo meille alusta alkaen, että se on mielipidekoodin muotoilija. Sinun pitäisi odottaa, että se muotoilee koodisi johdonmukaisella tavalla, mutta ehkä eri tavalla kuin tällä hetkellä olet määrittänyt sen. Mutta älä tuskaile! Voit säätää tätä kokoonpanoa.

Joten mistä aloitamme? Me jo:

  • Olet asentanut ESLintin
  • Olet lisännyt Babelin jäsentäjämme
  • Olet lisännyt laajennuksen, joka sisältää React-määritykset

Seuraavaksi aloitetaan asentamalla muutama paketti:

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

Huomaa: yllä oleva komento on samanlainen kuin npm. Jos projektisi ei toimi yarn, vaihda npmtarvittaessa.

Asennamme yllä:

  • kauniimpi: ydin kauniimpi paketti ja moottori
  • prettier-lint: välittää Prettier-tuloksen ESLintille korjaamaan ESLint-määrityksilläsi
  • prettier-eslint-cli: auttaa Prettieriä ja ESLintiä työskentelemään yhdessä projektin eri tiedostojen parissa

Ja asennamme ne dev-riippuvuudeksi, koska emme tarvitse sitä kehityksen ulkopuolella.

Uuden muotoilijan määrittäminen

Nyt kun pakettimme on asennettu, voimme määrittää yarnsuorittamaan tämän komennon meille.

Aiemmin olemme asettaneet lintkomentosarjan näyttämään tältä package.json:

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

Jätämme sen sellaisenaan, mutta teemme jotain vastaavaa ja luomme uuden komentosarjan sen vierelle, joka vaati formatmuotoilijamme Prettier:

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

Joten mitä siellä tapahtuu? Olemme:

  • Lisäämällä uusi komentosarja nimeltä format, jota voimme käyttää nimelläyarn format
  • Käytämme prettier-eslint-clipakettiamme muotoilun suorittamiseen meille
  • Ohitamme ESLint-kokoonpanomme, joka sijaitsee package.jsonprojektin juuressa vieressä (muuta tätä, jos se on eri paikassa)
  • Ja lopuksi, käskemme kauniimmin kirjoittamaan kaikki tiedostot, jotka vastaavat **/*.js, tai kaikki JS-tiedostot, jotka se löytää rekursiivisesti projektissamme

Kauneus on siinä, että siirrämme ESLint-kokoonpanomme Prettierille. Tämä tarkoittaa, että meidän on ylläpidettävä vain 1 kokoonpano molemmille työkaluille, mutta hyödynnämme silti ESLintin nukkaustehoa yhdessä Prettierin muotoiluvoiman kanssa.

Suorita muotoilija!

Nyt kun olemme kaikki valmiita, ajetaan se! Suorita tämä:

yarn format 

ja heti näemme, että se toimii:

Hei, koodini näyttää erilaiselta!

Kuten aiemmin mainitsin, Prettier kertoo meille suoraan ylöspäin, se on mielipiteellinen muotoilija. Se toimittaa omilla säännöillä, tavallaan kuin oma ESLint-kokoonpanonsa, joten se käy läpi ja tekee myös nämä muutokset.

Älä hylkää koodiasi! Sen sijaan voit tarkistaa muutokset, nähdä, onko järkevää pitää se tällä tavalla (se on hyvin johdonmukaista), tai voit päivittää ESLint config ( .eslintrc.js) korvata säännöt, jotka eivät pidä. Tämä on myös hyvä tapa oppia joitain uusia asioita, joita et ehkä ole odottanut jäävän kiinni aiemmin.

Joten mihin tämä jättää meidät?

Jos olet seurannut tähän mennessä, meillä on nyt kaksi komentoa:

  • lint: joka tarkistaa koodisi puolestasi ja kertoo sinulle mikä on vialla
  • format: yrittää korjata ongelmat automaattisesti

Kun käytät näitä käytännössä, paras veto on aina juosta formatensin, jotta se yrittää korjata kaiken mahdollisen. Suorita sitten heti lintkiinni kaikesta, mitä kauniimpi ei voinut korjata automaattisesti.

Mitä seuraavaksi?

Nyt kun voimme muotoilla koodimme automaattisesti, meidän pitäisi pystyä korjaamaan koodi automaattisesti!

Seuraavan kerran otamme tämän askeleen pidemmälle ja perustamme gitkoukun, joka antaa tämän juosta ennen sitoutumista. Tämä tarkoittaa, että sinun ei tarvitse koskaan huolehtia unohtamisesta suorittaa tämä uudelleen!

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen

Alun perin julkaistu osoitteessa //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/