Cos’è un linter? Capire ESLint e la sua importanza per il codice pulito

Quando più sviluppatori lavorano sulla stessa base di codice, le incoerenze di stile e gli errori nascosti possono accumularsi rapidamente.
È qui che entrano in gioco i linter, che controllano automaticamente il codice per individuare potenziali problemi e impongono uno stile coerente in tutto il progetto.

In questo articolo esploreremo cos’è un linter, perché dovresti usarne uno e perché ESLint è diventato lo strumento di riferimento nell’ecosistema JavaScript e TypeScript.

Cosa rilevano i linter

Un linter analizza il codice e rileva diverse categorie di problemi prima che causino bug o incoerenze.

• Errori di sintassi → Problemi che rendono il codice non valido o non eseguibile. Esempi:

  • Parentesi tonde o graffe mancanti → if (user.isLoggedIn {
  • Stringhe non chiuse → console.log("Hello)
  • Istruzioni return fuori posto o mancanti.

• Problemi di qualità del codice → Pattern che non violano la sintassi ma possono provocare errori durante l’esecuzione o confusione. Esempi:

  • Variabili inutilizzate → Dichiarare const result = computeValue(); senza mai usare result.
  • Codice irraggiungibile → Avere istruzioni dopo un return.
  • Variabili che ne nascondono altre → Riutilizzare il nome di una variabile di un ambito esterno.

• Incoerenze di stile → Differenze di formattazione e di stile che rendono il codice più difficile da leggere. Esempi:

  • Punti e virgola mancanti o rientri incoerenti.
  • Usare "double quotes" in un file e 'single quotes' in un altro.
  • Mescolare tabulazioni e spazi per i rientri.

• Violazioni delle buone pratiche → Codice che tecnicamente funziona ma contrasta con i pattern consigliati. Esempi:

  • Usare API deprecate (ad esempio, ReactDOM.render() in React 18).
  • Usare var invece di let o const.
  • Chiamare funzioni asincrone senza await.
  • Usare == invece di ===, il che può causare bug sottili di conversione implicita dei tipi.

I linter come ESLint non si limitano a individuare errori, impongono convenzioni e impediscono che cattive abitudini entrino nel repository.

Perché usare un linter?

1. Individuare gli errori in anticipo

I linter rilevano problemi prima ancora che l’app venga eseguita.
Per esempio, ESLint può avvisarti di una variabile non definita o di un await mancante in una funzione asincrona, risparmiandoti tempo di debug in seguito.

2. Garantire coerenza

Un linter impone uno stile di programmazione uniforme a tutto il team, evitando discussioni inutili su tabulazioni o spazi oppure su dove mettere le virgole.

3. Migliorare la qualità del codice

I linter incoraggiano un codice più pulito e manutenibile segnalando pattern complessi o rischiosi (come callback profondamente annidate o importazioni inutilizzate).

4. Integrarsi nel flusso di lavoro

Vengono eseguiti automaticamente nell’IDE, durante i commit (tramite hook pre-commit come Husky) o nelle pipeline CI/CD, mantenendo pulita la base di codice a ogni passaggio.

Approfondimento su ESLint: lo standard per JavaScript e TypeScript

ESLint è il linter più popolare nell’ecosistema JavaScript ed è ampiamente usato nei progetti React, Node.js e TypeScript.

🔧 Funzionalità principali

• Altamente configurabile → Personalizza ogni regola in base al tuo stile.
• Ecosistema di plugin → Estendilo con plugin della community (ad esempio, React, Jest, sicurezza, accessibilità).
• Supporto TypeScript → Integrazione completa tramite @typescript-eslint.
• Regole con correzione automatica → Molti problemi possono essere corretti automaticamente con:
  Copia il codice

  npx eslint . --fix
  

• Integrazioni → Funziona con VS Code, WebStorm, GitHub Actions e quasi tutti i sistemi CI.

Configurare ESLint

Puoi configurare ESLint nel tuo progetto con:

npx eslint --init

Se usi ESLint v8.23 o successivo, questo comando creerà un file Flat Config chiamato eslint.config.mjs (invece del vecchio formato .eslintrc.json). Questo formato moderno usa moduli JavaScript e offre prestazioni e chiarezza migliori.

Ecco un semplice esempio di configurazione che potresti usare in un progetto Next.js + TypeScript:

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Spiegazione

Analizziamo cosa succede:

js.configs.recommended

Carica le regole di base consigliate di ESLint, che coprono problemi fondamentali di JavaScript come:

• Variabili inutilizzate
• Codice irraggiungibile
• Istruzioni return mancanti
• Errori di sintassi

tseslint.configs.recommended

Aggiunge regole specifiche per TypeScript, rilevando per esempio:

• Importazioni inutilizzate
• Uso scorretto dei tipi
• Variabili dichiarate ma mai usate nei file .ts/.tsx

compat.extends('next/core-web-vitals')

Applica le regole di Next.js e React, tra cui:

• Buone pratiche di accessibilità (a11y)
• Controlli sull’uso dei React Hooks
• Avvisi sui problemi di prestazioni (come usare <img> invece di <Image>)

prettier

Disattiva le regole di linting relative alla formattazione che altrimenti entrerebbero in conflitto con Prettier.

rules

Adattamenti personalizzati specifici del progetto:

• 'no-console': ['warn'] → consente console.warn e console.error, ma segnala le altre chiamate alla console.
• '@typescript-eslint/no-unused-vars' → segnala variabili o parametri dichiarati ma non usati (ignora quelli che iniziano con _).
• 'semi': ['error', 'always'] → impone l’uso dei punti e virgola.

Questa configurazione offre:

• Linting JavaScript + TypeScript affidabile
• Buone pratiche Next.js integrate
• Compatibilità automatica con Prettier
• Regole semplici e chiare che rendono la base di codice coerente, leggibile e priva di bug

Una volta creato questo file, puoi eseguire il linting del progetto con:

npm run lint

oppure correggere automaticamente i problemi risolvibili:

npm run lint -- --fix

ESLint e altri linter a confronto

Da quando TSlint è stato ufficialmente deprecato a favore di ESLint, quasi tutti i progetti JavaScript e TypeScript moderni usano oggi ESLint.

Buone pratiche per usare ESLint

• Combina ESLint con Prettier per la formattazione automatica del codice.
• Aggiungi controlli ESLint agli hook pre-commit di Git con Husky o lint-staged.
• Eseguilo nella pipeline CI per imporre la qualità del codice nelle pull request.
• Potresti usare pacchetti consigliati come eslint-config-airbnb o eslint-plugin-react

Conclusione

I linter sono essenziali per mantenere basi di codice pulite, coerenti e prive di errori, soprattutto nei progetti collaborativi. Tra questi, ESLint si distingue come lo strumento più flessibile e potente per gli sviluppatori JavaScript e TypeScript.

Che tu lavori da solo o in un grande team, aggiungere ESLint al tuo flusso di lavoro garantisce che il codice rimanga professionale, leggibile e manutenibile nel lungo periodo.

Vuoi vedere ESLint in azione? Consulta la sua documentazione ufficiale oppure prova ad aggiungerlo al tuo progetto con npx eslint --init.