A kódminőség biztosítása: ESLint és Prettier beállítása Next.js-hez

A modern webfejlesztésben a sebesség, a skálázhatóság és a felhasználói élmény kulcsfontosságú. A Next.js, mint vezető React keretrendszer, kiválóan alkalmas ezen célok elérésére. Azonban a gyors fejlesztés során könnyen háttérbe szorulhat egy kritikus szempont: a kódminőség. A kódbázis rendezettsége, olvashatósága és hibamentessége nem csupán esztétikai kérdés; közvetlen hatással van a projekt hosszú távú sikerére, a csapatmunka hatékonyságára és a szoftver karbantarthatóságára. Ebben a részletes útmutatóban bemutatjuk, hogyan biztosíthatjuk a legmagasabb szintű kódminőséget Next.js alkalmazásainkban az ESLint és a Prettier eszközök szakszerű beállításával.

Képzeljük el a következőt: egy több fejlesztőből álló csapat dolgozik egy nagy Next.js projekten. Mindenki a saját stílusa szerint írja a kódot, valaki kettős, valaki szimpla idézőjeleket használ, mások szóközök helyett tabokat, megint mások elfelejtik a pontosvesszőt a sor végén. Az eredmény? Egy kaotikus, nehezen olvasható és karbantartható kódbázis, ahol a hibák felkutatása és javítása rémálommá válik. Az ESLint és a Prettier pontosan ezt a problémát oldják meg, automatizálva a kód stílusának és minőségének ellenőrzését.

Miért elengedhetetlen a kódminőség?

A tiszta, konzisztens és hibamentes kód számos előnnyel jár:

Fokozott olvashatóság: A szabványosított kód sokkal könnyebben olvasható és érthető, mind az eredeti szerző, mind a többi fejlesztő számára.
Egyszerűbb karbantartás: A jól szervezett kódot könnyebb módosítani, hibákat javítani és új funkciókat hozzáadni. Ez csökkenti a fejlesztési költségeket és növeli a szoftver élettartamát.
Kevesebb hiba: Az ESLint statikus elemzés segítségével még futtatás előtt képes azonosítani potenciális hibákat és anti-mintákat a kódban, ezzel megelőzve a későbbi problémákat.
Hatékonyabb csapatmunka: A közös kódolási szabványok megszüntetik a felesleges vitákat a kódstílusról, lehetővé téve a fejlesztők számára, hogy a valódi problémákra koncentráljanak.
Gyorsabb onboarding: Az új csapattagok gyorsabban beilleszkednek, ha a kódbázis következetes és könnyen átlátható.

ESLint: A Kódminőség Őrzője

Az ESLint egy népszerű nyílt forráskódú statikus kódanalizáló eszköz JavaScript és TypeScript projektekhez. Fő feladata, hogy felismerje a kódolási mintákat, amelyek potenciális hibákhoz, inkonzisztenciákhoz vagy egyszerűen csak rossz gyakorlatokhoz vezethetnek. Az ESLint szabályokat használ, amelyek konfigurálhatók, így pontosan meghatározhatjuk, milyen kódolási sztenderdeket szeretnénk érvényesíteni projektünkben.

ESLint előnyei:

Hibakeresés: Azonosítja a szintaktikai hibákat, a nem használt változókat, a potenciális futásidejű hibákat és egyéb problémákat.
Szabályok testreszabhatósága: Rengeteg beépített szabályt kínál, emellett egyedi szabályokat is írhatunk, vagy külső szabálykészleteket (pl. Airbnb, Standard) használhatunk.
Kiterjeszthetőség: Plugin-ek segítségével támogatja a különböző keretrendszereket és technológiákat (pl. React, Next.js, TypeScript).
Automatikus javítás: Sok szabály automatikusan javítható, ami jelentősen felgyorsítja a fejlesztési folyamatot.

ESLint beállítása Next.js projekthez

A Next.js 11-es verziótól kezdődően az ESLint beépített támogatással rendelkezik, ami jelentősen leegyszerűsíti a kezdeti beállítást. Amikor létrehozunk egy új Next.js projektet a create-next-app paranccsal, felajánlja az ESLint konfigurálását:

npx create-next-app@latest my-next-app --typescript --eslint

Ha már létező projektbe szeretnénk integrálni, futtassuk a következőt:

npm install --save-dev eslint
npm init @eslint/config

Vagy egyszerűbben, a Next.js saját parancsával:

npx @next/eslint-config --install

Ez a parancs telepíti a szükséges függőségeket, és létrehozza a .eslintrc.json fájlt a projekt gyökerében. A fájl tartalma valószínűleg így fog kinézni:

{
  "extends": "next/core-web-vitals"
}

Ez az alapkonfiguráció elegendő a Next.js specifikus linting szabályok aktiválásához. Azonban gyakran szeretnénk további, általánosabb vagy szigorúbb szabályokat is bevezetni. Ehhez kiterjeszthetjük az "extends" tömböt:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "next/core-web-vitals"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    // Egyedi szabályok, pl.:
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Nézzük meg röviden a fontosabb beállításokat:

extends: Itt adhatjuk meg a használni kívánt konfigurációkat. Az "eslint:recommended" az ESLint alapértelmezett javasolt szabályait tartalmazza. A "plugin:react/recommended" a React specifikus szabályokat aktiválja.
parserOptions: Meghatározza, hogyan értelmezze az ESLint a kódot (pl. ECMAScript verzió, JSX támogatás).
env: Meghatározza a globális környezeteket (pl. böngésző, Node.js), amelyekhez az ESLint előre definiált globális változókat ad hozzá.
settings: Plugin-ek specifikus beállításai (pl. a React plugin automatikusan detektálja a React verziót).
rules: Itt felülírhatjuk az "extends" által behozott szabályokat, vagy saját egyedi szabályokat adhatunk hozzá. A szabályok lehetnek "off" (kikapcsolva), "warn" (figyelmeztetés) vagy "error" (hiba, ami megakadályozza a fordítást/futást).

Futtathatjuk az ESLint-et a package.json fájlunkban definiált scriptek segítségével:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix"
  }
}

npm run lint           # Ellenőrzi a kódot
npm run lint:fix       # Ellenőrzi és megpróbálja javítani a problémákat

Prettier: A Kódformázás Mestere

Míg az ESLint a kód logikai és szerkezeti hibáira összpontosít, addig a Prettier kizárólag a kód formázásával foglalkozik. Ez egy „véleményes” kódformázó eszköz, ami azt jelenti, hogy kevés konfigurációs lehetőséget kínál, és inkább a saját, jól bevált stílusára támaszkodik. A Prettier filozófiája az, hogy elvegye a kódstílus körüli vitákat a fejlesztők válláról, és egyetlen, konzisztens formátumot kényszerítsen ki mindenki számára.

Prettier előnyei:

Konzisztens stílus: Garantálja, hogy minden kódrészlet azonos formátumú legyen, függetlenül attól, ki írta.
Kevesebb „bike-shedding”: Nincs több vita arról, hogy legyen-e szóköz az zárójel előtt, vagy hogy hány karakteres legyen egy sor. A Prettier eldönti.
Fókusz a logikára: A fejlesztők a kód funkciójára, nem pedig a formázására koncentrálhatnak.
Időmegtakarítás: Automatikusan formázza a kódot, így nem kell manuálisan igazítani a behúzásokat vagy az idézőjeleket.

Prettier beállítása Next.js projekthez

Telepítsük a Prettier-t és a szükséges függőségeket:

npm install --save-dev prettier

Hozzuk létre a .prettierrc.json fájlt a projekt gyökerében a formázási szabályaink definiálásához. Néhány gyakori beállítás:

{
  "semi": true,               // Mindig tegyen pontosvesszőt a sor végére
  "singleQuote": true,        // Szimpla idézőjeleket használjon (egyes quote-ok)
  "tabWidth": 2,              // 2 szóközös behúzás
  "printWidth": 80,           // Maximum 80 karakter soronként
  "trailingComma": "all"      // Mindig tegyen vesszőt az utolsó elem után, ha több sorba tör
}

Hozhatunk létre egy .prettierignore fájlt is, hogy kizárjunk bizonyos fájlokat vagy mappákat a formázásból (pl. node_modules, .next mappák).

Most adjunk hozzá egy szkriptet a package.json fájlunkhoz a Prettier futtatásához:

{
  "scripts": {
    "format": "prettier --write ."
  }
}

Futtassuk a formázást:

npm run format

Ez a parancs végigfut az összes fájlon a projektben, és formázza azokat a .prettierrc.json beállításai szerint.

ESLint és Prettier együttműködése: A Tökéletes Szinergia

Az ESLint és a Prettier önmagukban is nagyszerűek, de erejük igazán akkor bontakozik ki, ha együtt, harmóniában dolgoznak. A kezdeti kihívás az lehet, hogy bizonyos ESLint szabályok (pl. behúzás, pontosvessző) ütközhetnek a Prettier által kényszerített formázási stílussal. Ezért van szükségünk két további csomagra:

eslint-config-prettier: Ez a konfiguráció kikapcsolja az összes olyan ESLint szabályt, amely ütközhet a Prettier formázási szabályaival. Ez megakadályozza, hogy az ESLint hibákat vagy figyelmeztetéseket dobjon ki a Prettier által szándékosan formázott kódra.
eslint-plugin-prettier: Ez egy ESLint plugin, ami a Prettier-t egy ESLint szabályként futtatja. Ez azt jelenti, hogy a Prettier által talált formázási problémákat az ESLint hibaként jelenti, és akár automatikusan javítani is tudja azokat az --fix flag segítségével.

Integráció lépései

1. Telepítsük a szükséges csomagokat:

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

2. Módosítsuk a .eslintrc.json fájlunkat. A legfontosabb, hogy az "prettier" legyen az "extends" tömb UTOLSÓ eleme, hogy felülírja az összes korábbi, formázással kapcsolatos ESLint szabályt:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "next/core-web-vitals",
    "plugin:prettier/recommended", // Ez magában foglalja az eslint-plugin-prettier-t és az eslint-config-prettier-t is
    "prettier" // Ezzel biztosítjuk, hogy a Prettier szabályok legyenek az utolsók és felülírjanak minden mást
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    // Esetleges egyedi ESLint szabályok, amelyek NEM ütköznek a Prettier-rel
    "no-console": "warn",
    "react/prop-types": "off" // Például, ha TypeScript-et használunk
  }
}

Érdemes megjegyezni, hogy a "plugin:prettier/recommended" már tartalmazza mind a eslint-plugin-prettier, mind az eslint-config-prettier beállításait. A „prettier” hozzáadása az extends tömb végére még egy extra biztosíték arra, hogy semmilyen ESLint formázási szabály ne okozzon konfliktust.

Most, ha futtatjuk az npm run lint parancsot, az ESLint ellenőrzi a Prettier által talált formázási problémákat is. Az npm run lint:fix pedig megpróbálja javítani ezeket a problémákat.

Integráció Fejlesztői Környezettel (VS Code)

A fejlesztési élmény maximalizálásához elengedhetetlen az ESLint és Prettier integrálása a kódszerkesztőnkbe. A VS Code a legnépszerűbb választás, és kiváló támogatást nyújt mindkét eszközhöz.

VS Code Extensions:
- ESLint extension: Telepítsük a hivatalos ESLint kiterjesztést (dbaeumer.vscode-eslint). Ez futtatja az ESLint-et, és megjeleníti a hibákat és figyelmeztetéseket közvetlenül a szerkesztőben.
- Prettier – Code formatter extension: Telepítsük a hivatalos Prettier kiterjesztést (esbenp.prettier-vscode). Ez teszi lehetővé a kód formázását egy gombnyomással vagy mentéskor.

VS Code beállítások (settings.json):

{
  "editor.formatOnSave": true,         // Automatikus formázás mentéskor
  "editor.defaultFormatter": "esbenp.prettier-vscode", // A Prettier legyen az alapértelmezett formázó
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true     // Automatikus ESLint javítás mentéskor
  },
  "": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Ezek a beállítások biztosítják, hogy minden fájl mentésekor a Prettier formázza a kódot, és az ESLint automatikusan kijavítsa az esetleges problémákat. Ez jelentősen felgyorsítja a fejlesztési munkafolyamatot, hiszen a fejlesztők azonnal visszajelzést kapnak a kódminőségről.

Haladó Technikák és Ajánlott Gyakorlatok

Ahhoz, hogy a kódminőség ellenőrzése ne csak a fejlesztői gépeken működjön, hanem a projekt egész életciklusa során biztosított legyen, érdemes további eszközöket bevezetni.

Husky és lint-staged: Pre-commit Hook-ok

A Husky egy eszköz, ami lehetővé teszi, hogy Git hook-okat (kampókat) adjunk projektünkhöz. A pre-commit hook például minden Git commit előtt lefut. A lint-staged-del kombinálva biztosíthatjuk, hogy csak a stage-elt (commit-ra előkészített) fájlokon futtassuk az ESLint-et és Prettier-t, és csak akkor engedélyezzük a commit-ot, ha minden ellenőrzés sikeres.

Telepítsük a Husky-t és a lint-staged-et:
```
npm install --save-dev husky lint-staged
```
Aktiváljuk a Husky-t:
```
npx husky install
```

Adjuk hozzá a pre-commit hook-ot:

npx husky add .husky/pre-commit "npx lint-staged"

Adjuk hozzá a lint-staged konfigurációt a package.json fájlunkhoz:

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

Ezzel a beállítással minden alkalommal, amikor megpróbálunk egy commit-ot létrehozni, a Git automatikusan lefuttatja a lint-staged-et. Az pedig csak azokon a fájlokon futtatja az ESLint-et és Prettier-t, amelyeket hozzáadtunk a stage területhez. Ha az ESLint hibát talál, vagy a Prettier formázási problémát, a commit meghiúsul, amíg a problémákat nem javítjuk. Ez az automatizálás biztosítja, hogy a kódbázis mindig tiszta és konzisztens maradjon.

CI/CD integráció

Még egy lépéssel tovább menve, a kódminőség ellenőrzését beépíthetjük a Continuous Integration/Continuous Deployment (CI/CD) pipeline-unkba. Ez azt jelenti, hogy minden alkalommal, amikor egy új kód kerül a verziókövető rendszerbe (pl. GitHub), automatikusan lefutnak az ESLint és Prettier ellenőrzések. Ha hibát találnak, a build meghiúsul, megelőzve ezzel a rossz minőségű kód bekerülését az éles környezetbe. Ez a legmagasabb szintű biztosíték a kódminőség fenntartására egy professzionális fejlesztési környezetben.

Összefoglalás

A Next.js projektek sikeres fejlesztéséhez elengedhetetlen a magas kódminőség. Az ESLint és a Prettier nem csupán hasznos eszközök; a modern JavaScript és React fejlesztési munkafolyamat alapkövei. Az ESLint segít azonosítani a potenciális hibákat és a rossz gyakorlatokat, míg a Prettier egységesíti a kódstílust, kiküszöbölve a felesleges vitákat és a manuális formázás fáradalmait. Az ezeket az eszközöket kombináló, jól konfigurált fejlesztői környezet, kiegészítve pre-commit hook-okkal és CI/CD integrációval, garantálja a konzisztens, olvasható és karbantartható kódot. Ezáltal a fejlesztőcsapat produktívabbá válik, a projekt stabilabb lesz, és a szoftver hosszú távon is fenntartható marad. Ne feledjük, a tiszta kód nem egy luxus, hanem egy befektetés a jövőbe!