Ogni team di sviluppo ha una storia simile. Una pull request resta aperta per mezza giornata. Non perché la logica sia errata o il contratto API sia cambiato, ma perché due revisori non sono d'accordo sull'uso delle virgole finali nei letterali di oggetto. La discussione si allunga. Qualcuno posta il link a una guida di stile. Qualcun altro risponde con una guida diversa. Nel momento in cui il codice viene unito, tutti i coinvolti hanno perso il contesto delle funzionalità che stavano effettivamente costruendo.
Queste discussioni sono costose. Consumano ore del tempo degli ingegneri senior, creano un senso di risentimento latente tra i colleghi e abituano i developer junior a credere che l'ingegneria del software consista principalmente nel vincere discussioni sui punti e virgola. La parte peggiore? Al prodotto non importa. I tuoi utenti non noteranno mai la differenza tra uno spazio e un tab. Noteranno invece il bug che non hai corretto perché eri impegnato a discutere sull'uso delle virgolette.
La coerenza è importante. Una codebase che sembra scritta da una sola persona è più facile da leggere, da revisionare e da debuggare. L'errore è cercare di imporre tale coerenza manualmente.
Automatizza le cose noiose
La soluzione è semplice. Elimina completamente il giudizio umano dalla formattazione. Affidala a strumenti che non hanno ego e non si stancano.
Tre strumenti gestiscono tutto questo in modo pulito.
Prettier prende il tuo codice e lo riformatta automaticamente. Non chiede il permesso. Smetti di pensare alla lunghezza delle righe, agli stili delle virgolette o a come spezzare una lunga firma di funzione su più righe. Salvi il file. Prettier lo rende coerente.
ESLint gestisce i problemi che Prettier non tocca. Individua variabili non utilizzate, codice irraggiungibile, dipendenze mancanti negli hook di React e pattern che storicamente portano a bug. Se configurato correttamente, non interferisce con la formattazione e si concentra sulla reale qualità del codice.
Husky installa un hook di pre-commit che impedisce a qualsiasi cosa di entrare nel tuo repository finché i controlli automatizzati non passano. Trasforma la tua pipeline Git in un guardiano invece che in una casella di suggerimenti.
Insieme formano un ciclo serrato. Scrivi il codice come preferisci localmente. Quando fai il commit, gli strumenti lo puliscono e lo controllano. Solo allora il codice lascia la tua macchina.
Perché questo stack specifico funziona
Puoi passare settimane a regolare manualmente le regole di ESLint. Resisti a questa tentazione. L'obiettivo qui è smettere di discutere sullo stile, non creare un nuovo lavoro a tempo pieno come curatore di una guida di stile.
Prettier è intenzionalmente "opinionated". Offre opzioni di configurazione limitate perché ogni opzione è una potenziale discussione futura. I valori predefiniti sono sensati. Scegli un piccolo set di eccezioni, scrivile una volta e vai avanti.
ESLint, lasciato a se stesso, cercherà di imporre sia la qualità del codice che le regole di formattazione, come l'uso del punto e virgola e la dimensione dell'indentazione. Questo crea attrito con Prettier perché entrambi gli strumenti cercheranno di modificare gli stessi caratteri. Il pacchetto eslint-config-prettier risolve il problema disabilitando tutte le regole di ESLint che vanno in conflitto con Prettier. Questa separazione dei compiti è fondamentale. Prettier si occupa dell'estetica. ESLint si occupa della logica.
Eseguire i controlli solo nella continuous integration è troppo tardi. Nel momento in cui la CI fallisce, hai già effettuato il commit di codice disordinato, sei passato a un altro compito e possibilmente hai aperto una pull request. Risolverlo richiede un altro commit, un altro push, un altro ciclo di attesa. Husky accorcia questo ciclo di feedback a pochi secondi. Lint-staged lo rende veloce eseguendo gli strumenti solo sui file che hai effettivamente modificato, invece di scansionare l'intero repository a ogni commit.
Configurazione passo dopo passo
La seguente configurazione è pensata per un progetto moderno in JavaScript o React, ma il modello si applica a TypeScript, Vue o Node con piccoli aggiustamenti. Esegui ogni passaggio dalla root del tuo progetto.
Inizia installando tutto come dev dependencies:
npm install -D prettier eslint husky lint-staged eslint-config-prettier