Sfrutta al meglio Husky per Git Hooks nei tuoi progetti React

Git Hooks semplici nei progetti React: Husky

Nel mondo dello sviluppo software, il mantenimento di un codice pulito e privo di errori è cruciale per la manutenibilità e l'efficienza del software. Un codice chiaro migliora la collaborazione tra sviluppatori e riduce il rischio di bug, accelerando lo sviluppo e garantendo prodotti finali più affidabili.

In questo contesto, gli strumenti come i Git Hooks, supportati da Husky, diventano essenziali per automatizzare la verifica della qualità del codice, assicurando che ogni modifica rispetti gli standard di pulizia prima di essere integrata nel progetto.

I Git Hooks sono script che si attivano automaticamente in risposta a determinati eventi nel ciclo di vita di un repository Git, come i comandi commit o push. Questi hooks offrono una potente leva per automatizzare e imporre regole di qualità del codice prima che le modifiche raggiungano il repository.

Tuttavia, gestire Git Hooks nativamente può diventare complesso, soprattutto in progetti con molti sviluppatori. È qui che Husky entra in scena, semplificandone drasticamente l'utilizzo. Con Husky, gli sviluppatori possono configurare i Git Hooks direttamente dal package.json del proprio progetto, rendendo l'intero processo più accessibile e meno incline a errori.

Husky garantisce che ogni commit o push rispetti le regole stabilite, come l'esecuzione di linters o test, prima di procedere, assicurando così la qualità del codice in fase di sviluppo.

Setup di Husky in un progetto React

L'integrazione di Husky in un progetto React è un processo semplice ma potente per garantire l'aderenza agli standard di codice e qualità. 

Per poter integrare nel tuo progetto React Husky e ridurre il rischio di errori ecco i passaggi che la configurazione richiede:

Passo 1: installazione di Husky

Inizia installando Husky nel tuo progetto. Apri il terminale nella directory del progetto ed esegui il comando:

npm install husky --save-dev

Questo comando aggiunge Husky come una dipendenza di sviluppo (--save-dev) al tuo progetto, assicurandoti che non venga incluso nei build di produzione.

Passo 2: abilitare gli Script Git Hooks

Dopo aver installato Husky, bisogna abilitare i Git Hooks. Husky fornisce un comando conveniente per farlo:

npx husky install

Questo comando crea una directory .husky/ nel tuo progetto, dove potrai configurare i vari hooks.

Passo 3: aggiungere un Hook

Supponiamo che tu voglia eseguire l'ESLint ogni volta che viene effettuato un commit, per assicurarti che il codice rispetti le linee guida prima di essere commitato; per configurare questo comportamento con Husky occorre aggiungere uno script prepare nel tuo package.json per assicurare che Husky sia installato correttamente dopo l'installazione delle dipendenze:

"scripts": {
  "prepare": "husky install"
} 

Poi, utilizza il comando husky add per creare un nuovo hook pre-commit:

npx husky add .husky/pre-commit "npm run lint"

Assicurati di avere uno script lint configurato nel tuo package.json che esegua ESLint sul tuo progetto. Ecco un esempio: 

"scripts": {
  "lint": "eslint . --fix"
}

Passo 4: testare il Hook

Per verificare che il tuo hook funzioni come previsto, prova a fare un commit con del codice che sai non passerà il controllo ESLint. Se tutto è configurato correttamente, il commit dovrebbe essere bloccato fino a che non risolvi gli errori indicati.

Passo 5: configurazioni comuni dei Git Hooks con Husky

Oltre alla configurazione pre-commit per l'esecuzione di ESLint, ci sono altre configurazioni comuni di Git Hooks che possono migliorare il flusso di lavoro di sviluppo. Ecco alcuni esempi:

Pre-commit

Come visto, è comune utilizzare questo hook per eseguire linters o formatters, come ESLint o Prettier, per garantire che il codice rispetti le convenzioni di stile prima di essere commitato.

npx husky add .husky/pre-commit "npm run lint"

Pre-push

Questo hook può essere utilizzato per eseguire test o build prima di permettere il push al repository. È utile per catturare errori o problemi di build prima che il codice raggiunga gli altri membri del team o la CI pipeline.

npx husky add .husky/pre-push "npm run build"

Queste configurazioni aiutano a mantenere alta la qualità del codice e a ridurre la possibilità di introduzione di bug, assicurando che ogni commit e push rispetti le linee guida del progetto.

Configurazioni avanzate di Husky

Per progetti più complessi, Husky supporta configurazioni avanzate che possono aumentare notevolmente l'efficienza dello sviluppo. Un esempio popolare è l'utilizzo di lint-staged per eseguire linting solo sui file che sono stati modificati e aggiunti allo stage, piuttosto che sull'intero progetto. Questo approccio riduce significativamente i tempi di attesa per i pre-commit hooks.

{
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

L'integrazione di Husky nei nostri progetti React è più di una mera convenienza, è un passo verso la codifica responsabile. 

Questo strumento non solo ci libera dal peso di dover ricordare di eseguire manualmente controlli di qualità prima di ogni commit, ma istituisce un framework di best practices che tutti nel team sono incentivati a seguire. È una dichiarazione di intenti: "ci impegniamo per un codice di qualità", ma ricordiamo che Husky è solo uno strumento. La qualità del codice, in ultima analisi, dipende dall'attenzione, dalla cura e dall'impegno che noi sviluppatori mettiamo nel nostro lavoro. Husky semplifica il rispetto delle regole, ma sta a noi stabilirle e seguirle.

Open source: la community di Husky

Oltre ad adottare Husky nei nostri progetti, possiamo considerare di contribuire alla sua evoluzione.
Il bello dell'open source è proprio questo: uno strumento migliora non solo per il lavoro del suo creatore ma anche grazie ai contributi della community.

Se hai in mente miglioramenti, sei incappato in un bug o semplicemente vuoi aiutare con la documentazione, il tuo contributo è prezioso. Contribuire a progetti open source come Husky non solo arricchisce il progetto ma amplia anche le tue competenze come sviluppatore. Si impara a navigare in grandi codebase, a interagire con una community di sviluppatori e a comprendere più a fondo il ciclo di vita del software.

È un'esperienza che va oltre il codice: insegna a collaborare, a comunicare efficacemente e a contribuire a qualcosa che va oltre i confini del proprio editor di codice.

Husky rappresenta una soluzione pratica e efficace per mantenere alti standard di qualità del codice nei nostri progetti React. Ma il suo vero potenziale si realizza pienamente quando ci impegniamo non solo a usarlo ma anche a contribuire al suo sviluppo e miglioramento continuo. Come sviluppatori, abbiamo il potere di plasmare gli strumenti che usiamo, facendoli evolvere in base alle esigenze della nostra professione e della community globale di sviluppatori.