Sviluppo web

ESLint e Prettier senza conflitti: flat config e un solo comando

Flat config di ESLint 10, Prettier come unico proprietario della formattazione e `eslint-config-prettier` in fondo: niente regole che si annullano.

In sintesi

  • Prettier formatta, ESLint controlla la correttezza: `eslint-config-prettier` va per ultimo e spegne le regole che si sovrappongono.
  • In locale si usa `prettier . --write`, in CI `prettier . --check`: `--write` in CI produce un job verde che non ha corretto il repository.
  • Un plugin fermo al formato `eslintrc` richiede `FlatCompat`: verificalo prima di pianificare la migrazione a ESLint 10.

Risposta breve: lascia la formattazione a Prettier e la correttezza a ESLint, chiudi la lista di ESLint con eslint-config-prettier e lancia prettier . --check && eslint . in un solo script. Così i due strumenti non riscrivono lo stesso file.

Chi fa cosa

  • Prettier decide spazi, virgole e a capo: una sola configurazione per tutto il repository.
  • ESLint decide cosa è un errore di codice: variabili inutilizzate, import mancanti, regole del framework.
  • eslint-config-prettier spegne in ESLint tutte le regole di stile che litigherebbero con Prettier.

Senza il terzo passaggio i due strumenti si annullano: eslint --fix rimette un'indentazione che prettier --write cambia di nuovo. Il risultato è un diff a ogni salvataggio e un team che disattiva i controlli.

La configurazione minima, in flat config

import js from "@eslint/js";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  prettier,
  { ignores: ["dist/", ".next/"] },
);

L'ordine conta: prettier va per ultimo, perché disattiva le regole attivate dai preset precedenti. Su progetti con plugin rimasti al formato eslintrc serve FlatCompat, documentato nella guida alla migrazione. ESLint, Prettier ed eslint-config-prettier sono tutti con licenza MIT.

Un solo comando prima del commit

npm i -D eslint@10 prettier@3 typescript-eslint eslint-config-prettier
npx eslint .
npx prettier . --check

In locale formatta, in CI controlla: --write cambia i file, --check esce con codice 1 se qualcosa non è formattato. Mettere --write in CI produce un job verde che non ha corretto niente nel repository.

Gli errori che restano

Due casi ricorrenti: una regola di ESLint che Prettier non conosce, e un file ignorato da uno strumento e non dall'altro. Tieni le esclusioni in un posto solo, .prettierignore, e allinea la lista a ignores nella flat config.

Limite dichiarato

Non tutti i plugin pubblicati espongono già una flat config: un pacchetto fermo al formato eslintrc richiede FlatCompat e va verificato prima di pianificare la migrazione. Un plugin non aggiornato può bloccare l'adozione più di quanto la guida lasci intendere.

Dove continuare

Nel catalogo parti da tutti i componenti, dal form multi-step e dalla tabella lead. Per il resto leggi Vitest in un progetto React, gli errori di build comuni e il confronto Next.js o Vite.

Domande frequenti

ESLint e Prettier fanno la stessa cosa?

No. ESLint cerca errori di codice e pattern rischiosi, Prettier riscrive solo la forma. Sovrapporli è la causa più comune dei conflitti, e eslint-config-prettier esiste per togliere la sovrapposizione.

In che ordine vanno messi i preset nella flat config?

Prima i preset di linguaggio e framework, poi eslint-config-prettier per ultimo. L'ultimo preset che attiva una regola vince, quindi Prettier deve chiudere la lista.

Meglio eslint --fix o prettier --write?

Dipende da cosa vuoi correggere: prettier --write sistema la forma, eslint --fix le violazioni correggibili. Esegui prima Prettier e poi ESLint, senza alternarli sullo stesso file.

Perché la CI fallisce se in locale è tutto formattato?

Quasi sempre per una versione diversa di Prettier o per un file ignorato solo in locale. Fissa la versione nel package.json e verifica che .prettierignore sia nel repository.

Posso usare solo Prettier e rinunciare a ESLint?

Puoi, ma perdi i controlli che Prettier non fa: variabili inutilizzate, import rotti, regole specifiche di React o TypeScript. La coppia costa poco e copre due problemi diversi.