# ESLint and Prettier without conflicts: flat config, one command

ESLint 10 flat config, Prettier as the only owner of formatting, and eslint-config-prettier last in the list: no rules cancelling each other.

> Page: https://ui.eneawork.it/blog/come-usare-eslint-prettier
> Markdown: https://ui.eneawork.it/blog/come-usare-eslint-prettier.md

*2026-11-01*

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.

I download della settimana 23-29 ottobre 2026, letti da api.npmjs.org il 1 novembre 2026: eslint 202.066.413, prettier 180.056.360, eslint-config-prettier 68.012.255. Le versioni correnti sono ESLint 10.14.0 e Prettier 3.9.10. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026.

## Chi fa cosa

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.

## FAQ

### 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.