Generatore ESLintrc

Cosa contiene la configurazione generata

Il generatore parte sempre da eslint:recommended e aggiunge esattamente ciò che implicano le tue selezioni:

• env con browser e/o node, più es2022
• @typescript-eslint/parser e plugin:@typescript-eslint/recommended quando TypeScript è attivo
• plugin:react/recommended quando React è attivo
• no-console e no-unused-vars impostate su warn

L’output è un semplice oggetto JSON nella forma classica di .eslintrc.json, pronto da incollare e ampliare con le tue regole.

Configurazione piatta vs legacy

ESLint 9 ha deprecato il formato .eslintrc.* a favore della configurazione piatta (eslint.config.js). Differenze chiave:

I nuovi progetti dovrebbero utilizzare la configurazione piatta. I progetti esistenti possono rimanere su legacy attraverso la linea 10.x, ma si consiglia la migrazione.

Ecosistema dei plugin

Plugin tipici per progetti React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Sono sei pacchetti per una configurazione moderatamente opinata. Il generatore aggiunge quelli che selezioni, quindi installi solo ciò che la configurazione richiama.

Coesistenza con Prettier

Prettier gestisce il formato; ESLint gestisce la correttezza e lo stile oltre il formato. Per evitare conflitti:

1. Installa eslint-config-prettier e aggiungilo come ultimo elemento nel tuo extends/config.
2. Disattiva ogni regola ESLint che confligge con l’output di Prettier.
3. Esegui Prettier separatamente (al salvataggio nell’editor, nel pre-commit hook, in CI).

Non utilizzare eslint-plugin-prettier in nuovi progetti; rallenta ESLint eseguendo Prettier all’interno di ESLint. Separa i due strumenti.

Suggerimenti per la regolazione delle regole

• Inizia con flessibilità, stringi più tardi. Abilita avvisi prima degli errori.
• Sovrascrivi per i test. I file di test spesso necessitano di no-unused-expressions rilassato e variabili globali Jest disponibili.
• Sovrascrivi per gli script. Gli script di build potrebbero necessitare di variabili globali Node senza aggiungere env: node globalmente.
• Documenta le sovrascritture. Ogni sovrascrittura di regola merita un commento che spiega il perché.

Configurazione che corrisponde al tuo editor

VS Code ha bisogno dell’estensione ESLint installata e configurata. Aggiungi questi alle impostazioni del tuo workspace per la correzione automatica al salvataggio:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}