ESLint și Prettier
Linter vs formatter, flat config, reguli utile, automatizare, Biome.
Actualizat
Ce sunt linter-ul și formatter-ul
Două unelte diferite, des confundate:
| Linter (ESLint) | Formatter (Prettier) | |
|---|---|---|
| Întrebarea | Codul e corect? | Codul arată consecvent? |
| Găsește | bug-uri probabile: variabile nefolosite, await uitat, dependențe lipsă în useEffect, reguli de accesibilitate |
spații, ghilimele, virgule, lungimea rândurilor |
| Repară automat | unele reguli | tot |
| Exemplu | 'x' is assigned but never used |
"a" → 'a' |
Împreună elimină două categorii de discuții din code review: „aici ai un bug evident” și „pune spațiu aici”.
ESLint
ESLint analizează codul fără să-l ruleze (analiză statică) și aplică reguli. Configurația (flat config) e un array de obiecte:
// eslint.config.mjs — exact ce generează create-next-app în Next 16
import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
import nextTs from 'eslint-config-next/typescript'
export default defineConfig([
...nextVitals, // React, hooks, Next, accesibilitate, Core Web Vitals
...nextTs, // reguli TypeScript
globalIgnores(['.next/**', 'next-env.d.ts']),
{
rules: {
'no-console': ['warn', { allow: ['error'] }],
'react-hooks/exhaustive-deps': 'error',
},
},
])| Nivel | Efect |
|---|---|
'off' |
dezactivată |
'warn' |
apare, dar nu oprește CI-ul |
'error' |
oprește build-ul / CI-ul |
Reguli care prind bug-uri reale: react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, @typescript-eslint/no-floating-promises (Promise fără await), jsx-a11y/* (accesibilitate). În Next 16 rulezi eslint direct (next lint a fost eliminat).
Prettier
Prettier rescrie tot codul într-un stil unic. Aproape nicio opțiune — intenționat: nu se mai discută stilul.
// .prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 120,
"plugins": ["prettier-plugin-tailwindcss"]
}prettier-plugin-tailwindcss sortează automat clasele Tailwind în ordinea recomandată.
Unde rulează — automatizarea
| Loc | Cum | De ce |
|---|---|---|
| editor | „Format on save” + extensia ESLint | feedback instant |
| pre-commit | lefthook / husky + lint-staged: doar pe fișierele modificate | nu ajunge cod neformatat în Git |
| CI | npm run lint + prettier --check . + tsc --noEmit |
ultima barieră, obligatorie |
Alternativa: Biome
Biome = linter + formatter într-o singură unealtă, scrisă în Rust, de zeci de ori mai rapidă. Mai puține reguli și plugin-uri decât ESLint, dar o configurație mult mai simplă. Bună pentru proiecte noi care nu au nevoie de reguli specializate.
Pe scurt
- Linter = corectitudine (bug-uri probabile); formatter = aspect (stil).
- ESLint cu flat config + regulile Next / React hooks / a11y; Prettier pentru format.
- Rulează în editor, la pre-commit și în CI; Biome ca alternativă rapidă.