Ne csak szöszölje a kódot - javítsa ki a Prettier segítségével

A szöszösítés megkönnyíti az életünket, mert elmondja, mi a baj a kódunkkal. De hogyan kerülhetjük el a tényleges munka elvégzését, amely annak kijavításához vezet?

Korábban a szöszölésről írtam, mi ez, és hogyan könnyíti meg az életét. A végén ténylegesen felvettem egy módot, amellyel automatikusan kijavíthatja a kódot. Akkor miért írom ezt?

Mit akarsz kijavítani?

Mielőtt belevágnánk, ütjük meg ezt gyorsan. A linterek nagy teljesítményűek, és egyszerű módot kínálnak a kód átkutatására olyan szintaktikai hibák után, amelyek hibákhoz vezethetnek. Vagy egyszerűen segíthetnek abban, hogy a kódbázis tiszta, egészséges és következetes legyen. Futtatásakor az összes problémát megmutatja, és mindegyiket külön-külön végigviheti azok kijavításán.

Ha ezt a következő szintre emeli, egyes szálak valóban lehetővé teszik egy argumentum átadását a lintert futtató parancsnak, amely lehetővé teszi az automatikus javítást. Ez azt jelenti, hogy nem kell manuálisan végigmenned, és ezeket a kis szóközöket és pontosvesszőket (add hozzá!?) Elvégezned!

Tehát mit tehetek még a problémák megoldása érdekében?

Ha már használja a javítási opciót, ez jó kezdet. De vannak olyan eszközök, amelyeket kifejezetten ennek a problémának a kezelésére fejlesztettek ki, nem csak egy zászlót a parancsban. Akit kitakarok, az szebb.

Mi a szebb?

A Prettier „véleményes kódformázóként” rögzíti önmagát. Ehhez be kell írnia egy kódot, és következetes formátumban adja ki az eredeti kódstílus bármelyikét eltávolítva. Valójában átalakítja a kódot egy szintaktikai fává, majd átírja a stílusok és azokat a szabályokat, amelyeket Ön és Prettier együtt ad meg az ESLint config és a Prettier alapértelmezett szabályain keresztül.

Könnyedén használhatja a Prettier programot egyedül a kód formázásához, ami remekül működik. De ha ezt összekapcsolja egy mögöttes ESLint folyamattal, akkor mind egy erős lintert, mind egy erős fixert kap. Megmutatom, hogyan lehet ezeket együtt működni.

Első lépések a szebbnél

Ehhez az áttekintéshez feltételezem, hogy az ESLint programot beállította és konfigurálta egy alkalmazásban. Különösen ott folytatom, ahol az előző ismertetésemnél abbahagytam, ahol telepítettük az ESLint to React alkalmazást.

Megjegyzendő, hogy Prettier már a kezdetektől elmondja nekünk, hogy véleményes kódformázó. Arra kell számítani, hogy ez következetes formátumban formázza a kódot, de talán más módon, mint amit jelenleg konfigurált. De ne izgulj! Ezt a konfigurációt módosíthatja.

Tehát mit kezdünk? Mi már:

  • Telepítette az ESLint alkalmazást
  • Hozzáadták Bábelt elemzőnknek
  • Hozzáadott egy bővítményt, amely a React konfigurációit tartalmazza

Ezután kezdjük el néhány csomag telepítésével:

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

Megjegyzés: a fenti parancs hasonló a használatához npm. Ha a projekt nem használható yarn, cserélje ki a npmmegfelelőre.

Fent telepítjük:

  • szebb: mag Szebb csomag és motor
  • prettier-lint: átadja a Prettier eredményt az ESLint-nek, hogy javítsa az ESLint config segítségével
  • prettier-eslint-cli: elősegíti a Prettier és az ESLint együttműködését a projekt különböző fájljain

Dev-függőségként telepítjük őket, mivel a fejlesztésen kívül nincs szükségünk rá.

Az új formázó konfigurálása

Most, hogy a csomagjaink telepítve vannak, beállíthatjuk, yarnhogy futtassa ezt a parancsot nekünk.

Korábban egy ilyen lintszkriptet állítottunk be, amely így néz ki package.json:

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

Ezt hagyjuk úgy, ahogy van, de csinálunk valami hasonlót, és létrehozunk egy új parancsfájlt közvetlenül mellette, formatamely a szebb formázónkat kéri:

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

Szóval mi folyik ott? Mi:

  • Egy új szkript hozzáadása format, amelyet futtathatunkyarn format
  • prettier-eslint-cliCsomagunkat felhasználjuk a formázás futtatásához
  • Átadjuk az ESLint konfigurációnkat, amely package.jsona projekt gyökérében található mellettünk található (változtassa meg ezt, ha más helyen van)
  • Végül pedig azt mondjuk, hogy szebben írjuk be az összes megfelelő fájlt **/*.js, vagy bármilyen JS fájlt, amelyet rekurzívan talál a projektünk során

A szépség itt az, hogy az ESLint konfigurációnkat átadjuk a Prettier-nek. Ez azt jelenti, hogy mindkét eszközhöz csak 1 konfigurációt kell fenntartanunk, de továbbra is kiaknázzuk az ESLint szöszképző erejét és a Prettier formázási teljesítményét.

Futtassa a formázót!

Most, hogy mindannyian felkészültünk, futtassuk! Futtassa a következőt:

yarn format 

és azonnal látjuk, hogy működik:

Hé, a kódom másképp néz ki!

Mint korábban említettem, Prettier egyenesen elmondja nekünk, ez véleményes formázó. Saját szabályokkal szállítja, mintegy olyan, mint a saját ESLint konfigurációja, így ezeket a változtatásokat is elvégzi.

Ne hagyja el a kódját! Ehelyett áttekintheti a módosításokat, megnézheti, hogy van-e értelme ezt így megtartani (nagyon következetes lesz), vagy frissítheti az ESLint config ( .eslintrc.js) fájlt a nem tetsző szabályok felülírására. Ez egyben jó módszer arra, hogy esetleg megtanuljon néhány olyan új dolgot, amelyre korábban nem számított, hogy elkapja.

Tehát ez hová hagy minket?

Ha eddig követte, most két parancsunk van:

  • lint: amely ellenőrzi az Ön kódját és megmondja, mi a baj
  • format: automatikusan megpróbálja kijavítani a problémákat

Ha ezeket a gyakorlatban használja, akkor az a legjobb, ha mindig formatelsőként fut, és hagyja, hogy megpróbálja automatikusan kijavítani mindent, amit csak tud. Aztán azonnal szaladj, linthogy elkapj mindent, amit Szebb nem tudott automatikusan kijavítani.

Mi a következő lépés?

Most, hogy automatikusan formázhatjuk a kódunkat, képesnek kell lennünk a kódunk automatikus javítására!

Legközelebb megtesszük ezt egy lépéssel tovább, és felállítunk egy gitkampót, amely lehetővé teszi ennek futtatását, mielőtt elkötelezné magát. Ez azt jelenti, hogy soha többé nem kell aggódnia, hogy elfelejti ezt futtatni!

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? ️ Iratkozzon fel a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre

Eredetileg a //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/ címen jelent meg.