ESLint: Az alapvető kezelőeszközök alapvető tényei

A közelmúltban egyre jobban részt veszek a front-end fejlesztésben. Minél többet csinálok, annál jobban elveszik az elmém és a lelkem kaotikus világában. Még egy egyszerű To-Do-List alkalmazáshoz is szükség lehet egy csomó eszközre - az ESLint, a Babel, a Webpack, hogy csak néhányat említsek - és csomagokra, csak az induláshoz.

Szerencsére sok kezdőkészlet van odakint, így nem kell mindent az alapoktól kezdve végigcsinálnunk. Velük már minden be van állítva, így azonnal elkezdhetjük írni az első kódsort. Időt takarít meg az ismétlődő, unalmas feladatokra, amelyek nagyszerűek lehetnek a tapasztalt fejlesztők számára.

Ennek az előnynek azonban ára van a kezdőknek. Mivel minden a dobozon kívül működik, varázslatnak tűnik, és lehet, hogy nem tudják, mi történik valójában a motorháztető alatt, amit valamilyen szinten meg kell érteni. Bár a tanulási görbe nem olyan meredek, mint mások - próbáljon összehasonlítani néhány eszközzel, amelyet már megtanult és használt, megkapja, amire gondolok - ebben a kaotikus világban túlélési útmutatóra van szükségünk az utazáshoz.

Ez a sorozat a front-end fejlesztés alapvető eszközeiről és azokról az alapvető tudnivalókról fog szólni, amelyeket tudnunk kell róluk. Ez lehetővé teszi számunkra, hogy uralkodjunk az eszközökön, ahelyett, hogy kontrollálnánk őket.

Ebben az ezen eszközök mindegyikének fejlesztői tapasztalataira fogunk összpontosítani. Tehát ennek a sorozatnak az a célja, hogy túlélési útmutatóként működjön és az egyes eszközökről magas szintű áttekintést adjon, és ne szolgáljon dokumentációként.

Mi lesz benne:

  • ESLint <- Itt vagyunk
  • Bábel
  • Webpack
  • Folyam
  • TypesScript
  • Tréfa.

Elég egy előszó, kezdjük az első eszközzel: ESLint.

Mi az ESLint és miért használnánk?

Az ESLint, amint a neve is mutatja, az ECMAScript lintere. És a linter meghatározása:

egy gép a rövid szálak eltávolítására a gyapotmagról a gyapjú eltávolítása után.

Bár a kódnak és a gyapotmagnak semmilyen kapcsolata nincs, a kódtól vagy a gyapotmagtól függetlenül, a szösz segít tisztábbá és következetesebbé tenni a dolgokat. Nem akarjuk így látni a kódot:

const count = 1; const message = "Hello, ESLint" count += 1 

Csúnyán néz ki, és hibája van. Itt van, amikor az ESLint közreműködik ebben. Ahelyett, hogy hagyná a hibát a böngésző konzoljára dobni, amikor futtatjuk a kódot, az ESLint elkapja, amikor gépelünk (na nem igazán: ehhez szerkesztő vagy IDE kiterjesztésekre lesz szükségünk, amelyekre később kitérünk).

Természetesen ezt a hibát nem nehéz kitalálni, de nem lenne szebb, ha egy asszisztens emlékeztetne minket minden alkalommal, amikor tévedni készülünk, és esetleg automatikus javítást végez nekünk? Bár az ESLint nem képes mindenféle hibát elkapni, legalább megkímél minket némi erőfeszítéstől, így időt tölthetünk más olyan dolgokra, amelyek fontosak és emberi figyelmet igényelnek.

Hogyan működik az ESLint?

Most, hogy tudjuk, mi az ESLint, és miért van rá szükségünk, menjünk egy kicsit mélyebbre, és nézzük meg, hogyan működik. Lényegében három nagy lépésre bonthatjuk.

Elemző

A kód, amelyet írunk, nem más, mint egy karaktersor. Ez a sorrend azonban nem csak véletlenszerű karakterek: nekik olyan szabályokat vagy konvenciókat kell követniük, amelyek a nyelvtant alkotják.

Az ember számára a szöveg vagy a kód olvasásától a fogalmunk megértéséig való elmozdulás kevés erőfeszítést jelent. A számítógép számára ezt sokkal nehezebb megvalósítani. Például:

const tool = 'ESLint' // 1 const tool = "ESLint" // 2 

A fenti két sort elolvasva rögtön tudjuk, hogy azonosak, és " toolaz ESLint értékével megnevezett állandó " néven olvashatók. Egy számítógép számára, amely nem érti a jelentését, ez a két vonal egészen másnak tűnik. Ennek eredményeként, ha nyers kódot adunk az ESLint-nek, szinte lehetetlen bármit is megtenni.

Amikor a dolgok bonyolulttá és nehezen kommunikálhatóvá válnak - gondoljunk csak arra, hogyan lehet számítógépünk ahhoz, hogy megértsük, mit csinálunk - az absztrakció menekülhet. A dolgok elvonatkoztatásával elrejtünk minden felesleges részletet, csökkentjük a zajokat, és mindenkit ugyanazon az oldalon tartunk, ami megkönnyíti a kommunikációt. A fenti példában egy vagy két szóköz nem számít, sem az egyetlen, sem a kettős idézőjel.

Más szavakkal, egy értelmező ezt teszi. A nyers kódot absztrakt szintaxisfává (AST) alakítja át, és ezt az AST-t a moszatszabályok alapjául szolgáló közegként használják. Az AST létrehozásához még mindig sok lépést kell elvégeznie egy elemzőnek - ha érdekelne többet az AST létrehozásának módjáról, akkor ennek az oktatóanyagnak jó áttekintése van.

Szabályok

A folyamat következő lépése az AST futtatása a szabályok listáján. A szabály egy logika arra vonatkozóan, hogy miként lehet kitalálni az AST-ben a kódban fennálló lehetséges problémákat. Az itt feltüntetett kérdések nem feltétlenül szintaktikai vagy szemantikai hibák, de lehetnek stilisztikai hibák is. A szabályból kapott kimenet tartalmaz hasznos információkat a későbbi felhasználáshoz, például kódsorokat, pozíciókat és informatív üzeneteket a problémáról.

A problémák elkapása mellett egy szabály akár automatikus javítást is végezhet, ha lehetséges. Például, ha a fenti kódra nem több szóköz kerül, akkor az az összes felesleges szóközt levágja, így a kód tiszta és következetes lesz.

 const tool = "ESLint" // 2 // becomes const tool = "ESLint" // 2 

Különböző esetekben egy szabály különböző szinteken használható - leiratkozás, csak figyelmeztetés vagy szigorú hiba -, és különféle lehetőségek állnak rendelkezésére, amely lehetővé teszi számunkra a szabály használatának irányítását.

Eredmény

Itt jön a folyamat vége. A szabály kimenetével csak az a kérdés, hogyan jelenítsük meg azt emberbarát módon, a korábban említett összes hasznos információnak köszönhetően. Ezután az eredményből gyorsan rámutathatunk a kérdésre, hogy hol van, és javítsunk, vagy talán nem.

Integráció

Az ESLint robusztus CLI-jével önálló eszközként használható, de ez csontos módszer az ESLint használatára. Nem akarunk minden alkalommal beírni egy parancsot, amikor a kódot el akarjuk vinni, különösen egy fejlesztői környezetben. Erre megoldást jelent az ESLint integrálása a fejlesztői környezetünkbe, így kódot írhatunk és az ESLint által elkapott problémákat egy helyen láthatjuk.

Ez a fajta integráció az IDE-k vagy szerkesztők specifikus kiterjesztéseiből származik. Ezekhez a kiterjesztésekhez az ESLint működése szükséges, mivel az ESLint-et a színfalak mögött futtatják - nem csoda, hogy még mindig együtt kell telepítenünk az ESLint-et, ezek semmi sem az ESLint nélkül. Ez az elv vonatkozik más IDE vagy szerkesztő kiterjesztésekre, amelyeket naponta használunk.

Emlékszel a fenti szabály kimenetére? Egy bővítmény az IDE-ben vagy a szerkesztőben történő megjelenítésre használja. Az, hogy pontosan hogyan jelenik meg a kimenet, attól függ, hogy a kiterjesztés hogyan valósul meg, és hogy az IDE vagy a szerkesztő nyitott-e a kiterjesztésekre. Néhány kiterjesztés kihasználja a szabályok kijavításának képességeit a szabályoktól a kód megváltoztatásához a mentés során, ha engedélyezzük.

Konfiguráció

A konfiguráció a fő erő, amely sokoldalúságot ad egy eszköznek. Az ESLint nem különbözik ettől, kivéve, hogy a többi eszköz között a legátfogóbb konfigurációval rendelkezik. Általánosságban szükségünk van egy fájlra vagy egy helyre a konfiguráció beállításához, és van néhány lehetőség közülünk.

Mindegyik két fő módszert fed le: vagy külön eszközünk van egy konfigurációs fájlhoz, vagy mindegyiket összecsomagoljuk package.json.  .eslintrc.jsegyike azoknak a fájloknak, amelyeknek az ESLint a konfigurációját keresi, és amelyek a legnagyobb prioritást élvezik.

A következő, amit tudnunk kell a konfigurációról, annak hierarchiája és lépcsőzetes viselkedése. Ezeknek a funkcióknak köszönhetően nem kell konfigurációs fájlt tartalmaznunk a projekt minden egyes mappájában.

Ha egy konfigurációs fájl nem létezik egy mappában, az ESLint egyszerűen megkeresi a mappa szülőjét, amíg nem talál. Ezután vissza fog állni a felhasználó egészére kiterjedő alapértelmezett konfigurációra ~/.eslintrc. Ellenkező esetben a konfigurációs fájl összeadja vagy felülírja a felső szinteket.

Van azonban egy speciális csípés ebben. Ha root: trueegy konfigurációs fájlban adjuk meg , akkor a keresés le fog állni ennél a fájlnál, ahelyett, hogy feljebb mennénk, mint korábban. Ezenkívül az ESLint ezt a konfigurációs fájlt fogja használni gyökérkonfigurációként, és az összes gyermekkonfiguráció ezen fog alapulni.

Ez nem csak az ESLint-re korlátozódik - ezek a dolgok más eszközöknél általánosak. Beszéljünk az ESLint-specifikus konfigurációról.

Elemző

Az elemző szerepét az ESLint-ben fentebb tárgyaltuk. Alapértelmezés szerint az ESLint az Espree-t használja elemzőként. Megváltoztathatjuk ezt az elemzőt egy másik kompatibilisre, mint például a babel-eslint vagy a @ typcript-eslint / parser, ha a Babel vagy a Typescript rendszert használjuk.

Az elemző konfigurálásához használjuk parserOptions. Az Espree által támogatott lehetőségek közül néhányat gyakran használunk, és figyelnünk kell ezekre:

  • ecmaVersion

Meg kell adnunk a megfelelő ECMA verziót a használni kívánt funkciókhoz. Például, ha emcaVersion: 5az alábbi kód hibákat ad.

```javascript let a = [1, 2, 3, 4] // error due to `let` keyword var b = [...a, 5] // error due to spread syntax ``` 

Az elemző nem tudja elemezni a kódot, mert a letkulcsszó és a spread szintaxis is csak most került bevezetésre az ES6-ban. Ha emcaVersion6-ra vagy magasabbra vált, egyszerűen megoldja a hibákat.

  • sourceType

Manapság többnyire mindent modulokba írunk, majd összecsomagoljuk őket. Tehát ennek a lehetőségnek legtöbbször meg kell lennie module.

Egy másik érték, amelyet használhatunk - valamint az alapértelmezett - az script. A különbség az, hogy használhatunk-e JS modulokat vagy sem, azaz a felhasználás importés a exportkulcsszó. Legközelebb, amikor ezt a hibaüzenetet kapjuk Parsing error: 'import' and 'export' may appear only with 'sourceType: module', tudjuk, hol keressük.

  • ecmaFeatures.jsx

Előfordulhat, hogy további ES szolgáltatásokat szeretnénk használni, például a JSX szintaxist. Ezt ecmaFeatures.jsx: truea funkciót engedélyezzük. Ne feledje, hogy az Espree JSX támogatása nem azonos a React JSX támogatásával. Ha React specifikus JSX-t akarunk, akkor a jobb eredmények eléréséhez az eslint-plugin-reagált kell használnunk.

Ha másik elemzőt használunk, ezek a lehetőségek nagyjából megegyeznek. Egyeseknek lehet, hogy kevesebb lehetőségük van, másoknak pedig több, de mindet a következők határozzák meg parserOptions.

Környezet

Attól függ, hol fut a kód: különböző előre definiált globális változók vannak. Megvan window, documenta böngésző, például. Bosszantó lenne, ha a no-undef szabály be van kapcsolva, és az ESLint folyamatosan közli velünk, windowvagy documentnincs megadva.

A envlehetőség itt van, hogy segítsen. A környezetek listájának megadásával az ESLint tudni fog a globális változókról ezekben a környezetekben, és használjuk őket szó nélkül.

Van egy különleges környezetet meg kell jegyeznünk, es6. Ez hallgatólagosan parserOptions.ecmaVersion6-ra áll, és engedélyezi az összes ES6 funkciót, kivéve azokat a modulokat, amelyeket továbbra is parserOptions.sourceType: "module"külön kell használnunk .

Bővítmények és megosztható konfigurációk

Fárasztó lehet, ha a különböző projektekben ugyanazon konfiguráció van a szabályok számára újra és újra. Szerencsére újból felhasználhatunk egy konfigurációt, és csak szükség esetén felülírhatjuk a szabályokat extends. Ezt a típusú konfigurációt megosztható konfigurációnak hívjuk, és az ESLint már kettővel rendelkezik: eslint:recommendedés eslint:all.

Hagyományosan az ESLint megosztható konfigurációinak eslint-configelőtagja van, így az NPM-en keresztül eslint-configkulcsszóval könnyen megtalálhatjuk őket . A több száz találat között van néhány népszerű eredmény, például az eslint-config-airbnb vagy az eslint-config-google.

A dobozból kifolyólag az ESLint egy csomó szabályt tartalmaz, amelyek különböző célokat szolgálnak, a lehetséges hibáktól, a bevált gyakorlatoktól, az ES6-tól a stilisztikai kérdésekig. Sőt, hogy feltöltse képességeit, az ESLint nagyszámú harmadik féltől származó szabályt tartalmaz, amelyeket csaknem ezer beépülő modul biztosít. A megosztható konfigurációkhoz hasonlóan az ESLint beépülő moduljai előtaggal vannak ellátva eslint-plugin, és az NPM-en a eslint-pluginkulcsszóval állnak rendelkezésre .

A beépülő modul meghatározza az új szabályok halmazát, és a legtöbb esetben a saját praktikus konfigurációit tárja fel. Például a eslint-plugin-reagálnak ad nekünk két megosztható konfigurációk, eslint-plugin-react:recommendedés eslint-plugin-react:allmint eslint:recommendedés eslint:all. Az egyik használatához először meg kell határoznunk a bővítmény nevét, másodsorban pedig ki kell terjesztenünk a konfigurációt.

{ plugins: ["react"], extends: "plugin:react/recommended" } // Note that we need to prefix the config by `plugin:react` 

Az egyik gyakori kérdés, hogy milyen pluginokat vagy konfigurációkat kell használni. Bár nagyban függ az igényeinktől, használhatjuk az Awesome ESLint-t referenciaként, hogy hasznos pluginokat és konfigurációkat találjunk.

Szebb

Már majdnem ott vagyunk - már majdnem a végére értünk. Végül, de nem utolsósorban az ESLint egy népszerű párját, a Prettier-t fogjuk megvitatni. Röviden: a Prettier véleményes kódformázó. Noha a Prettier egyedül használható, az ESLint-be való integrálása sokat javítja az élményt, és az eslint-plugin-szebb elvégzi ezt a munkát.

A különbség a Prettier önmagában történő használata és a Prettier és az ESLint használata között összefoglalható a kód formázásaként. Ahelyett, hogy a formátumproblémákat külön adná meg, a Prettier és az ESLint futtatása a formátumproblémákat ugyanúgy kezeli, mint más kérdéseket. Ezek a problémák azonban mindig javíthatók, ami egyenértékű a kód formázásával.

Így eslint-plugin-prettierműködik. Általában a Prettier programot futtatja a színfalak mögött, és összehasonlítja a kódot a Prettier futtatása előtt és után. Végül a különbségeket egyedi ESLint-kérdésekként számolja be. A problémák megoldásához a plugin egyszerűen a Prettier formázott kódját használja.

Ahhoz, hogy ez az integráció, fel kell telepíteni a két prettierés eslint-plugin-prettier. eslint-plugin-prettierszintén jön a eslint-plugin-prettier:recommendedconfig - amely kiterjeszti az eslint-config-szebbet. Ezért eslint-config-prettiera használatához telepítenünk is kell .

{ "plugins": ["prettier"], "extends": "plugin:prettier/recommended" } 

Következtetés

A kódrétegek vagy a formázók a szoftverfejlesztés de facto standardjává váltak, konkrétan az ESLint a front-end fejlesztésben.

Előnyei messze túlmutatnak azon, amit technikailag tesz, mivel segít a fejlesztőknek a fontosabb kérdésekre koncentrálni. A kódstílus gépre történő átruházásának köszönhetően elkerülhetjük a vélemény-stílusokat a kódellenőrzés során, és ezt az időt használhatjuk inkább értelmesebb kódellenőrzésre. A kódminőség szintén előnyös, következetesebb és kevésbé hibára hajlamos kódot kapunk.

Ezt a cikket eredetileg a blogomon tették közzé .