Vo svete JavaScriptu a TypeScriptu sa stále niečo deje. Poslednou veľkou novinkou je update môjho obľúbeného lintera, ESLint, ktorý sa dostal na verziu 9. Ak s ním už máte nejaké skúsenosti, určite viete, že už dávno neposkytuje len statickú analýzu JavaScriptu. Dokáže toho oveľa viac.
ESLint používame na našich projektoch ako hlavný linter, ktorý sa v spojení s Prettierom stará o formátovanie a detekciu chýb v JavaScripte, TypeScripte, HTML a JSON. V kombinácii so Stylelintom máme vďaka nemu navyše pod kontrolou aj SCSS. Nie je preto prekvapením, že vývoj týchto nástrojov pozorne sledujeme a priebežne nasadzujeme stále novšie verzie, aby sme udržali konzistenciu a kvalitu kódu na najvyššej úrovni.
Poďme sa teda pozrieť na to, čo nám priniesol ESLint 9.0.
Nový formát konfigurácie: Flat Config
Doterajší JSON formát pre konfiguráciu ESLintu už viac nie je podporovaný a v ďalších verziách úplne zmizne. Nový formát sa volá Flat config, je písaný v JavaScripte a jeho výhodou je priama podpora importov a odolnejšia konfigurácia voči chybám.
Našťastie, konfigurátory sme pri nasadzovaní novej verzie nemuseli prepisovať ručne. Existuje totiž oficiálny migrátor, ktorý starý config automaticky prevedie do nového formátu. Z mojej skúsenosti ale vyplýva, že tento nástroj vyrieši len zhruba 80 % roboty. Zvyšok si vyžaduje ručné zásahy, najmä ak ste si do configu pridali nejaké svoje úpravy.
Rýchlejšie a presnejšie API
Aj keď som ešte nemal čas úplne preskúmať všetky nové možnosti API v ESLint 9, prvotné zmeny ukazujú zlepšenie vo výkonnosti a presnosti. Najväčšou výhodou je zrýchlenie analýzy kódu, čo sa prejavuje aj tým, že nové API efektívnejšie prechádza súbory a pri využití --quiet úplne ignoruje varovania, čo urýchľuje prácu s veľkými projektami.
Prísnejšie pravidlá: TypeScript a Angular v centre pozornosti
Akonáhle boli vyladené hlavné pravidlá, všetci začali tomuto novému formátu prispôsobovať aj pluginy. Vďaka tomu pribudlo obrovské množstvo nových typov pravidiel a optimalizácií. Hlavne pri práci s TypeScriptom a Angularom som bol milo prekvapený, ako dobre dokážu tieto novinky detegovať problémy a zlepšiť kvalitu kódu.
Nové pravidlá v praxi: Čo sa mení?
- Odstránenie zastaraných pravidiel: Pravidlá, ktoré už neboli relevantné pre novšie verzie ECMAScriptu, boli odstránené, ako napríklad no-extra-semi či no-inner-declarations.
- Pridanie nových pravidiel:
- no-constant-binary-expression: Zabráni používaniu konštantných výrazov v binárnych operáciách.
- no-empty-static-block: Opatrenie, ktoré zakazuje prázdne statické bloky v triedach.
- no-unused-private-class-members: Pravidlo, ktoré pomáha detekovať nepoužívané súkromné členy tried v TypeScripte.
Príklady:
1.
Predtým: Žiadna kontrola prázdnych statických blokov, čo mohlo viesť k zbytočnému kódu.
class Test {
static {}
}
Teraz: ESLint 9.0 deteguje prázdny statický blok ako chybu:
Error: no-empty-static-block - Prázdne statické bloky sú nepovolené.
2.
Predtým: Binárny výraz je konštantný, a teda zbytočný:
let a = 3;
if (a === 3) {
Teraz: ESLint 9 to označí ako chybu a ponúkne opravu, aby bol kód zrozumiteľnejší:
Error: no-constant-binary-expression - Používanie konštantných výrazov v podmienkach je nepovolené.
Rozšírená podpora formátov: Lintujte JSON, Markdown a ďalšie
Doteraz som bol zvyknutý používať ESLint primárne na JavaScript a TypeScript, ale nová verzia posúva hranice o niečo ďalej. Pomocou oficiálnych pluginov teraz ESLint podporuje aj ďalšie formáty ako JSON, Markdown, či dokonca YAML, čo umožňuje analyzovať a kontrolovať konzistenciu v širšom spektre súborov.
Ako to funguje v praxi:
- Markdown: Pomocou pluginu eslint-plugin-markdown môžeme teraz lintovať kód priamo v Markdown súboroch. Napríklad, ak máme v rámci dokumentácie JavaScriptový kód, ESLint ho dokáže analyzovať a upozorniť na chyby.
- JSON: V projektoch, kde pracujeme s konfiguračnými súbormi v JSON formáte (napr. package.json), môžeme teraz použiť ESLint na kontrolu konzistencie a validácie týchto súborov.
- YAML: YAML sa často používa v konfiguráciách CI/CD. Teraz môžeme tieto súbory lintovať rovnako ako kód, aby sme predišli chybám pri nasadzovaní.
Najotravnejšie pravidlo? @angular-eslint/prefer-standalone
Momentálne najotravnejšie pravidlo je podľa mňa @angular-eslint/prefer-standalone, ktoré síce pri autofixe nastaví komponent na standalone, ale už nevykoná importy a ďalšie potrebné kroky pre úspešnú migráciu. To znamená, že časť migrácie musím robiť manuálne, čo ma spomalilo. Je to však nutné, pretože od Angular 19 bude standalone predvolene zapnutý pre všetky komponenty, čo znamená, že okrem nových komponentov budeme na projekte postupne prerábať aj existujúce na standalone: true. Takže skôr či neskôr sa tejto zmene nevyhneme.
Nárast chýb: Viac práce, ale aj lepší výsledok
Výkon? O dosť rýchlejší. Presnosť? Vylepšená. Ale čo sa týka chýb, katastrofa. Je veľmi pravdepodobné, že po aktualizácii na ESLint 9 vám počet errors a warnings stúpne aj na dvojnásobok. Nové pravidlá sú totiž oveľa prísnejšie, rozsiahlejšie, a za chybné označujú aj také veci, ktoré predtým linter vôbec nekontroloval.
Aj napriek tomu sme všetky ESLint, TS-ESLint, Angular ESLint, ngrx eslint a Prettier pravidlá nastavili na odporúčané hodnoty. Aj keď to bolo miestami otravné, ukázalo sa to ako veľmi užitočné. V konečnom dôsledku nám pomohli dôkladne preveriť celý kód a odstrániť nedostatky, ktoré by nám inak mohli uniknúť.
Prechod na ESLint 9 bol síce výzvou, ale výsledok určite stojí za námahu. Nové prísnejšie pravidlá a vylepšenia výrazne pomáhajú udržiavať vysokú kvalitu kódu, čo sa v dlhodobom horizonte určite vyplatí. Namiesto hľadania skratky v podobe vypnutia pravidiel preto odporúčam prispôsobiť projekt týmto zmenám a využiť všetky nové funkcie, ktoré ESLint 9 ponúka. Odmenou vám bude čistejší a kvalitnejší kód, ktorý sa bude do budúcna omnoho ľahšie spravovať.
