Husky et Lint-Staged : Les alliés des commits propres !

1. Pourquoi automatiser les vérifications avant le commit ?

Quand on travaille sur un projet, il est facile d'oublier de lancer les tests, de vérifier la qualité du code ou même de formater son code avant de valider un commit. Résultat ? Un historique Git pollué par des corrections inutiles, du code mal formaté et des erreurs en production.

Husky et Lint-Staged permettent d'automatiser ces vérifications et d'assurer qu'aucun code non conforme ne passe à la validation.

2. Husky : Qu'est-ce que c'est ?

Husky est un outil qui permet d'exécuter des hooks Git avant des actions comme un commit ou un push. Cela permet de bloquer les commits qui ne respectent pas les standards du projet.

📌 Installation de Husky (Mise à jour 2024)

1️⃣ Installer Husky en tant que dépendance dev :

npm install --save-dev husky

2️⃣ Initialiser Husky :

npx husky-init && npm install

🚀 Pourquoi ? Cette commande installe Husky et crée automatiquement un hook pre-commit de base.

📌 Ajouter un hook pre-commit proprement

1️⃣ Ajoute la commande Lint-Staged dans le hook pre-commit :

echo -e "#!/bin/sh\n. \"\$(dirname \"\$0\")/_/husky.sh\"\n\nnpx lint-staged" > .husky/pre-commit
chmod +x .husky/pre-commit

📌 Pourquoi ? Cette commande s'assure que Husky exécute Lint-Staged correctement avant chaque commit.

3. Lint-Staged : Optimiser les vérifications

Husky est puissant, mais lancer ESLint ou Prettier sur tout le projet peut être lent. C'est là que Lint-Staged intervient : il permet d'exécuter ces outils uniquement sur les fichiers modifiés.

📌 Installation de Lint-Staged et Prettier

Avant d'installer Lint-Staged, assure-toi que Prettier est bien installé :

npm install --save-dev prettier

Puis installe Lint-Staged :

npm install --save-dev lint-staged

Ajoutez ensuite la configuration suivante dans package.json :

"lint-staged": {
  "**/*.{js,ts,jsx,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

Vérifie que Lint-Staged fonctionne avec :

npx lint-staged --help

Si cette commande ne fonctionne pas, assure-toi que Lint-Staged est bien installé.

Puis, connectez-le à Husky avec :

echo "npx lint-staged" > .husky/pre-commit
chmod +x .husky/pre-commit

Désormais, chaque commit lancera ESLint et Prettier uniquement sur les fichiers modifiés.

4. Pourquoi utiliser Husky et Lint-Staged ensemble ?

🎯 Avantages :

✅ Empêche les commits non conformes (évite du code mal formaté ou avec des erreurs).

✅ Ne vérifie que les fichiers modifiés (gain de temps énorme).

✅ S'intègre facilement avec Git et CI/CD.

✅ Renforce la discipline et la qualité du code dans les équipes.

5. Exemple d’une configuration avancée avec Husky et Lint-Staged

Fichier package.json :

{
  "husky": {
    "hooks": {
      "pre-commit": "npx lint-staged",
      "pre-push": "npm test"
    }
  },
  "lint-staged": {
    "**/*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Avec cette configuration :

• Avant un commit, ESLint et Prettier sont appliqués sur les fichiers modifiés.
• Avant un push, les tests sont exécutés pour éviter d'envoyer du code cassé.

📌 Ajouter un pre-push pour exécuter les tests avant de push

Si tu veux bloquer les pushs contenant du code qui ne passe pas les tests :

echo "npm test" > .husky/pre-push
chmod +x .husky/pre-push

6. Conclusion

Mettre en place Husky et Lint-Staged permet de garantir un code propre sans effort manuel. L'intégration de ces outils dans un workflow Git améliore la qualité du projet et évite bien des erreurs.