ESLint beállítása a tiszta és konzisztens JavaScript kódért

A modern szoftverfejlesztésben a kódminőség és a kódkonzisztencia létfontosságú. Különösen igaz ez a JavaScript világában, ahol a rugalmasság néha a kaotikus és nehezen olvasható kódhoz vezethet. Itt jön képbe az ESLint, egy hihetetlenül hatékony eszköz, amely segít kiküszöbölni ezeket a problémákat. Ez a cikk egy átfogó útmutatót nyújt az ESLint beállításához és használatához, hogy projektjei tiszta, egységes és hibamentes JavaScript kóddal büszkélkedhessenek.

Miért van szükségünk ESLint-re? A Kódkáosz felszámolása

Gondoljunk bele: egy csapatban minden fejlesztőnek megvan a maga preferált kódolási stílusa. Valaki szereti a pontosvesszőt, más nem. Egyikük a két szóközös behúzást preferálja, a másik a négyet. Néhányan szigorúan kezelik a változódeklarációkat, mások lazábban. Ezen különbségek önmagukban nem feltétlenül hibásak, de együttvéve komoly problémákat okozhatnak:

Nehéz olvashatóság: Egy kolléga kódjának megértése, amely teljesen más stílusban íródott, mint a miénk, felesleges időt és energiát emészt fel.
Inkonzisztencia: A projekt kódja patchwork-szerűvé válik, ami nehezíti a karbantartást és a hibakeresést.
Rejtett hibák: Az ESLint nem csupán stilisztikai szabályokat ellenőriz, hanem potenciális futásidejű hibákra is figyelmeztet, mint például a nem használt változók, hozzáférhetetlen kódblokkok, vagy bizonyos veszélyesnek ítélt JavaScript konstrukciók.
Code Review terhe: A code review-k során sok idő megy el azzal, hogy stilisztikai vagy formázási problémákat orvosoljanak, ahelyett, hogy a logika vagy az architektúra megvitatására koncentrálnának.

Az ESLint pontosan ezeket a problémákat oldja meg. Egy előre definiált szabályrendszer (vagy egyedi szabályok) alapján automatikusan ellenőrzi a kódot, és figyelmeztet a hibákra, vagy akár automatikusan javítja is azokat. Ezzel biztosítja a kód egységességét, javítja a karbantarthatóságot és hozzájárul a jobb fejlesztői élményhez.

Az ESLint telepítése és kezdeti beállítása

Az ESLint használatához először telepítenünk kell. Győződjünk meg róla, hogy a Node.js és az npm (vagy yarn) telepítve van a gépünkön.

1. Telepítés

A legjobb gyakorlat az ESLint projekt-specifikus telepítése, mint fejlesztési függőség. Nyissuk meg a projektünk gyökérkönyvtárát a terminálban, majd futtassuk a következő parancsot:

npm install eslint --save-dev
# vagy ha yarn-t használunk:
yarn add eslint --dev

Ez telepíti az ESLint-et a node_modules mappába, és hozzáadja a package.json fájlunkhoz.

2. Inicializálás

Miután telepítettük, inicializálnunk kell a konfigurációs fájlt. Erre a --init parancs szolgál:

npx eslint --init

Az npx biztosítja, hogy a helyileg telepített ESLint-et használjuk. Ez a parancs egy interaktív varázslót indít el, amely végigvezet minket a beállítási folyamaton:

Hogyan szeretné használni az ESLint-et? (Pl.: Check syntax, find problems, and enforce code style)
Milyen típusú modulokat használ a projektje? (Pl.: JavaScript modules (import/export) vagy CommonJS (require/exports))
Milyen keretrendszert használ? (Pl.: React, Vue.js, None of these)
Használ TypeScript-et? (Igen/Nem)
Hol fut a kódja? (Pl.: Browser, Node)
Milyen stílus útmutatót szeretne használni? (Pl.: Airbnb, Standard, Google, vagy válaszolunk a kérdésekre egy saját stílus létrehozásához)
Milyen formátumú legyen a konfigurációs fájl? (Pl.: JavaScript, YAML, JSON)

A választásaink alapján az ESLint automatikusan telepíti a szükséges plugin-eket, konfigurációkat, és létrehozza a .eslintrc.js (vagy .eslintrc.json/.eslintrc.yml) fájlt a projekt gyökérkönyvtárában. Ez lesz a központi konfigurációs fájlunk.

Az ESLint konfigurációs fájl (.eslintrc.*) részletei

Nézzük meg közelebbről a .eslintrc fájl legfontosabb elemeit:

`env`: Futáskörnyezetek

Ez a tulajdonság határozza meg, milyen globális változókat tekinthet az ESLint előre definiáltnak, elkerülve a „globális változó nem definiált” hibákat. Például:

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  }
}

Ez lehetővé teszi a böngésző (pl. window, document), Node.js (pl. process, __dirname) és az ES2021 globálisainak használatát.

`extends`: Kiterjesztett konfigurációk

Ez az egyik legerősebb funkció. Lehetővé teszi, hogy mások által már definiált, bevált szabályrendszereket örököljünk. Ezzel elkerülhetjük a nulláról történő konfigurálást. Gyakori értékek:

eslint:recommended: Az ESLint által ajánlott alapvető szabályok, amelyek a potenciális hibákra fókuszálnak.
airbnb-base vagy airbnb: Az iparág egyik legnépszerűbb és legátfogóbb stílus útmutatója. Az airbnb a React szabályokat is tartalmazza.
google: A Google JavaScript stílus útmutatója.
standard: Egy egyszerűbb, kevesebb szabályt tartalmazó, de konzisztens stílus.

Több konfigurációt is megadhatunk egy tömbben, ekkor az utoljára megadott szabály felülírja az előzőeket:

{
  "extends": [
    "eslint:recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ]
}

`parser` és `parserOptions`: Parser beállítások

A parser határozza meg, hogyan értelmezi az ESLint a kódunkat. Az alapértelmezett parser a ECMAScript legújabb verzióit is támogatja, de bizonyos esetekben (pl. TypeScript, vagy nagyon korai stage funkciók) egyedi parserre lehet szükség:

@typescript-eslint/parser: TypeScript kód elemzéséhez.
babel-eslint (régebbi projektekhez): Babel által transzpilált kód elemzéséhez.

A parserOptions további beállításokat tesz lehetővé:

{
  "parserOptions": {
    "ecmaVersion": 2021, // A használt ECMAScript verzió
    "sourceType": "module", // Modulok (import/export) használata
    "ecmaFeatures": {
      "jsx": true // JSX szintaxis engedélyezése
    }
  }
}

`plugins`: Kiegészítő szabályok

A plugin-ek további szabályokat és parsereket adhatnak az ESLint-hez, amelyek specifikus technológiákhoz (pl. React, Vue, TypeScript) vagy kódolási mintákhoz (pl. import rendszerek) kapcsolódnak. Telepítés után a plugins tömbben kell megadni őket (a eslint-plugin- előtag nélkül):

{
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    "@typescript-eslint",
    "prettier"
  ]
}

Ezek után az extends részben hivatkozhatunk a plugin-ek által biztosított ajánlott konfigurációkra (pl. "plugin:react/recommended").

`rules`: Egyedi szabályok és felülírások

Ez a szekció adja a legnagyobb rugalmasságot. Itt egyedileg beállíthatunk, felülírhatunk vagy kikapcsolhatunk bármilyen szabályt. Egy szabálynak három állapota lehet:

"off" vagy 0: A szabály kikapcsolva.
"warn" vagy 1: Figyelmeztetésként jelenik meg, de nem akadályozza meg a sikeres lintelést.
"error" vagy 2: Hibaként jelenik meg, és hibával tér vissza a lint parancs.

Példa:

{
  "rules": {
    "indent": ["error", 2], // 2 szóközös behúzás, hiba esetén
    "quotes": ["error", "single"], // Szimpla idézőjelek, hiba esetén
    "no-console": "warn", // Konzol logok esetén figyelmeztetés
    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }] // Nem használt változók esetén figyelmeztetés, kivéve ha '_' előtaggal kezdődik
  }
}

`settings`: Plugin beállítások

Néhány plugin specifikus beállításokat igényel. Például a React plugin számára megadhatjuk a React verzióját:

{
  "settings": {
    "react": {
      "version": "detect" // Automatikusan érzékeli a React verziót
    }
  }
}

`ignorePatterns`: Figyelmen kívül hagyandó fájlok

A .eslintignore fájl mellett itt is megadhatjuk, mely fájlokat és mappákat hagyja figyelmen kívül az ESLint. Például:

{
  "ignorePatterns": ["node_modules/", "build/", "dist/", "*.min.js"]
}

Népszerű konfigurációk és integrációk

Az ESLint ereje abban rejlik, hogy integrálható más eszközökkel és stílus útmutatókkal.

1. Airbnb Style Guide integrációja

Az Airbnb egy nagyon népszerű és széles körben használt, szigorú stílus útmutató. Telepítése a következő csomagokat igényli:

npm install eslint-config-airbnb-base eslint-plugin-import --save-dev
# Ha React-et használunk:
npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

Ezután adjuk hozzá az extends tömbhöz a .eslintrc.js fájlunkban:

{
  "extends": ["airbnb-base"] // vagy "airbnb" React projektekhez
}

2. Prettier integráció: Formázás és Linting együtt

A Prettier egy önfejű kódfomázó, ami automatikusan újraformázza a kódot egy előre definiált szabályrendszer szerint. Az ESLint a kódminőségi problémákat, a Prettier pedig a formázást kezeli. A kettő remekül kiegészíti egymást. Ahhoz, hogy az ESLint ne ütközzön a Prettier formázási szabályaival, a következő csomagokat kell telepíteni:

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

prettier: maga a Prettier eszköz.
eslint-config-prettier: kikapcsolja azokat az ESLint szabályokat, amelyek ütköznének a Prettier szabályaival. Ez VÉGSŐKÉNT kell szerepeljen az extends listában!
eslint-plugin-prettier: ESLint szabályként futtatja a Prettier-t, és megjeleníti a formázási hibákat ESLint hibaként.

A .eslintrc.js frissítése:

{
  "extends": [
    "eslint:recommended",
    "airbnb-base", // vagy más alapkonfiguráció
    "plugin:prettier/recommended" // EZ UTOLJÁRA KELL, hogy felülírja az ESLint formázási szabályait!
  ],
  "rules": {
    "prettier/prettier": "error" // A Prettier formázási hibák ESLint hibaként jelennek meg
  }
}

Létrehozhatunk egy .prettierrc fájlt is a projekt gyökérkönyvtárában, hogy testre szabjuk a Prettier viselkedését (pl. "semi": false, "singleQuote": true, "tabWidth": 2).

3. TypeScript integráció

TypeScript projektek esetén szükségünk lesz a TypeScript-hez készült parserre és plugin-re:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Ezután frissítsük a .eslintrc.js fájlt:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // TypeScript ajánlott szabályok
    "airbnb-base", // Ha ezt használjuk, további beállítások kellenek a TS-hez
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    // TypeScript specifikus szabályok felülírása, ha szükséges
    "@typescript-eslint/explicit-module-boundary-types": "off",
    // Példák az Airbnb és TS közötti ütközések feloldására
    "no-unused-vars": "off", // Az @typescript-eslint/no-unused-vars fogja kezelni
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

Fontos megjegyezni, hogy az Airbnb konfiguráció eredetileg JavaScript-re készült, így TypeScript projektekben gyakran szükség van az import/extensions szabály felülírására és egy import/resolver beállítására a settings szekcióban, hogy az import plugin felismerje a .ts/.tsx fájlkiterjesztéseket.

ESLint a fejlesztői munkafolyamatban

Az ESLint ereje abban rejlik, hogy zökkenőmentesen integrálható a mindennapi fejlesztői munkafolyamatba.

1. NPM scriptek

Adjuk hozzá a package.json fájlunk scripts szekciójához:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "prettier": "prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,md}""
  }
}

npm run lint: Ellenőrzi az összes .js, .jsx, .ts, .tsx fájlt a projektben.
npm run lint:fix: Ellenőrzi és automatikusan javítja a javítható hibákat.
npm run prettier: A Prettier-rel formázza a megadott fájltípusokat.

2. IDE integráció

Szinte minden modern IDE és kódszerkesztő (pl. VS Code, WebStorm) rendelkezik ESLint pluginnel, amely valós időben jelzi a hibákat, és sok esetben automatikusan javítja is őket mentéskor. Ez drámaian javítja a fejlesztői élményt.

VS Code: Telepítsük az „ESLint” extensiont a marketplace-ről. A settings.json fájlban hozzáadhatjuk a következőket az automatikus javításhoz mentéskor:
```
{
          "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
          }
        }
```

3. Pre-commit hook-ok (Husky és lint-staged)

Ahhoz, hogy biztosítsuk a kódkonzisztenciát a csapatban, érdemes beállítani pre-commit hook-okat. Ezek olyan parancsok, amelyek automatikusan lefutnak, mielőtt egy commit létrejönne. Ha a lintelés sikertelen, a commit megszakad.

npm install husky lint-staged --save-dev

A package.json fájlban adja hozzá a következőket:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
    "*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --write"
  }
}

Ez beállítja, hogy commit előtt az ESLint futtassa a --fix paranccsal a stage-elt JavaScript/TypeScript fájlokon, és a Prettier formázza az összes releváns fájlt. Ez biztosítja, hogy a verziókövetésbe (Git) csak tiszta és formázott kód kerüljön.

Legjobb gyakorlatok és tippek

Kezdjünk egy alapkonfigurációval: Ne a nulláról induljunk. Válasszunk egy bevált stílus útmutatót (Airbnb, Standard, Google) az extends segítségével.
Prettier beállítása korán: Integráljuk a Prettier-t már a projekt elején, hogy elkerüljük a későbbi nagyobb formázási commit-okat.
Használjuk a --fix kapcsolót: Gyakran futtassuk a eslint --fix parancsot, vagy állítsuk be az IDE-t az automatikus javításra.
Beszéljük meg a szabályokat: Egy csapatban fontos, hogy mindenki egyetértsen a használt ESLint szabályokban. Ne féljünk felülírni a szabályokat, ha a projektünk vagy a csapatunk speciális igényei azt megkívánják.
Tartsuk naprakészen az ESLint-et és plugin-jeit: Rendszeresen frissítsük a függőségeket, hogy hozzáférjünk az új funkciókhoz és hibajavításokhoz.
Ne essünk túlzásba a szabályokkal: A túl sok szigorú szabály frusztráló lehet. Találjuk meg az egyensúlyt a konzisztencia és a fejlesztői szabadság között.

Konklúzió

Az ESLint egy felbecsülhetetlen értékű eszköz minden modern JavaScript fejlesztő számára. Segít megőrizni a kódminőséget, biztosítja a konzisztenciát, csökkenti a hibák számát és javítja a csapatmunka hatékonyságát. Bár a kezdeti beállítás igényel némi energiát, a befektetett idő sokszorosan megtérül a tisztább, karbantarthatóbb és hibamentesebb kód formájában. Ne habozzon, integrálja az ESLint-et következő projektjébe, és tapasztalja meg a különbséget!