Portails de Qualité de Code JavaScript : Maîtriser la Configuration des Pre-commit Hooks

Dans le monde en constante évolution du développement logiciel, le maintien d'une haute qualité de code est primordial. Un code propre, bien formaté et sans bug non seulement réduit les coûts de maintenance, mais favorise également la collaboration et accélère les cycles de développement. Une technique puissante pour garantir la qualité du code est la mise en œuvre de portails de qualité de code à l'aide de pre-commit hooks. Cet article fournit un guide complet pour configurer les pre-commit hooks pour les projets JavaScript, vous permettant d'automatiser les vérifications de qualité du code avant même que celui-ci n'atteigne votre dépôt.

Que sont les Pre-commit Hooks ?

Les Git hooks sont des scripts que Git exécute avant ou après des événements tels que commit, push et receive. Les pre-commit hooks, en particulier, s'exécutent avant la finalisation d'un commit. Ils offrent une opportunité cruciale d'inspecter les modifications en cours de validation et d'empêcher les commits qui ne respectent pas les normes de qualité prédéfinies. Considérez-les comme des gardiens qui empêchent le code de mauvaise qualité d'entrer dans votre base de code.

Pourquoi utiliser des Pre-commit Hooks pour la qualité du code JavaScript ?

• Détection précoce des erreurs : Les pre-commit hooks détectent les problèmes de qualité du code tôt dans le processus de développement, les empêchant de se propager. C'est bien plus efficace que de découvrir des problèmes lors des revues de code ou, pire encore, en production.
• Formatage de code automatisé : Assurez un style de code cohérent au sein de votre équipe et de votre projet. Le formatage automatisé prévient les débats stylistiques et contribue à une base de code plus lisible.
• Réduction de la charge de la revue de code : En appliquant automatiquement les normes de codage, les pre-commit hooks réduisent la charge des réviseurs de code, leur permettant de se concentrer sur les décisions architecturales et la logique complexe.
• Amélioration de la maintenabilité du code : Une base de code cohérente et de haute qualité est plus facile à maintenir et à faire évoluer dans le temps.
• Cohérence imposée : Ils garantissent que tout le code est conforme aux normes du projet, quel que soit le développeur qui l'a écrit. C'est particulièrement important dans les équipes distribuées travaillant depuis différents endroits – disons, Londres, Tokyo et Buenos Aires – où les styles de codage individuels peuvent varier.

Outils clés pour la qualité du code JavaScript

Plusieurs outils sont couramment utilisés en conjonction avec les pre-commit hooks pour automatiser les vérifications de qualité du code JavaScript :

• ESLint : Un puissant linter JavaScript qui identifie les erreurs potentielles, applique les styles de codage et aide à améliorer la lisibilité du code. Il prend en charge un large éventail de règles et est hautement configurable.
• Prettier : Un formateur de code dogmatique qui met automatiquement en forme le code pour adhérer à un style cohérent. Il prend en charge JavaScript, TypeScript, JSX et de nombreux autres langages.
• Husky : Un outil qui facilite la gestion des Git hooks. Il vous permet de définir des scripts qui seront exécutés à différentes étapes du workflow Git.
• lint-staged : Un outil qui exécute les linters et les formateurs uniquement sur les fichiers stagés, accélérant considérablement le processus de pre-commit. Cela évite les vérifications inutiles sur les fichiers non modifiés.

Configurer les Pre-commit Hooks : Un guide étape par étape

Voici un guide détaillé sur la façon de configurer les pre-commit hooks pour votre projet JavaScript en utilisant Husky et lint-staged :

Étape 1 : Installer les dépendances

Tout d'abord, installez les paquets nécessaires en tant que dépendances de développement en utilisant npm ou yarn :

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Ou, en utilisant yarn :

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Étape 2 : Initialiser Husky

Husky simplifie le processus de gestion des Git hooks. Initialisez-le avec la commande suivante :

            npx husky install
            

              
                Copy
              
            
          

Cela créera un répertoire `.husky` dans votre projet, qui stockera vos Git hooks.

Étape 3 : Configurer le Pre-commit Hook

Ajoutez un pre-commit hook en utilisant Husky :

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Cette commande crée un fichier `pre-commit` dans le répertoire `.husky` et y ajoute la commande `npx lint-staged`. Cela indique à Git d'exécuter lint-staged avant chaque commit.

Étape 4 : Configurer lint-staged

lint-staged vous permet d'exécuter des linters et des formateurs uniquement sur les fichiers stagés, ce qui accélère considérablement le processus de pre-commit. Créez un fichier `lint-staged.config.js` (ou `lint-staged.config.mjs` pour les modules ES) à la racine de votre projet et configurez-le comme suit :

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Cette configuration indique à lint-staged d'exécuter ESLint et Prettier sur tous les fichiers JavaScript et TypeScript stagés. L'option `--fix` d'ESLint corrige automatiquement toutes les erreurs de linting qui peuvent être corrigées automatiquement, et l'option `--write` de Prettier formate les fichiers et les écrase avec le code formaté.

Alternativement, vous pouvez définir la configuration directement dans votre fichier `package.json` :

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

              
                Copy
              
            
          

Étape 5 : Configurer ESLint

Si vous ne l'avez pas déjà fait, configurez ESLint pour votre projet. Vous pouvez créer un fichier de configuration ESLint avec la commande suivante :

            npx eslint --init
            

              
                Copy
              
            
          

Cela vous guidera à travers le processus de création d'un fichier de configuration ESLint (`.eslintrc.js`, `.eslintrc.json` ou `.eslintrc.yml`) en fonction des besoins de votre projet. Vous pouvez choisir parmi une variété de configurations prédéfinies ou créer vos propres règles personnalisées.

Exemple de `.eslintrc.js` :

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

Cette configuration étend les règles recommandées d'ESLint, les règles recommandées de React, les règles recommandées de TypeScript, et s'intègre avec Prettier. Elle désactive également la règle `react/prop-types` et définit la règle `no-unused-vars` sur un avertissement.

Étape 6 : Configurer Prettier

Configurez Prettier en créant un fichier `.prettierrc.js` (ou `.prettierrc.json`, `.prettierrc.yml` ou `.prettierrc.toml`) à la racine de votre projet. Vous pouvez personnaliser les options de formatage de Prettier pour correspondre aux directives de style de votre projet.

Exemple de `.prettierrc.js` :

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Cette configuration configure Prettier pour utiliser des guillemets simples, pas de points-virgules, des virgules de fin, une largeur d'impression de 120 caractères et une largeur de tabulation de 2 espaces.

Alternativement, vous pouvez définir la configuration de Prettier à l'intérieur de `package.json` :

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Étape 7 : Tester votre configuration

Pour tester votre configuration, stagez quelques modifications et essayez de les commiter. Par exemple :

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test du pre-commit hook"
            

              
                Copy
              
            
          

S'il y a des problèmes de linting ou de formatage, ESLint et Prettier les corrigeront automatiquement (si possible) ou signaleront des erreurs. Si des erreurs sont signalées, le commit sera annulé, vous permettant de corriger les problèmes avant de commiter à nouveau.

Options de configuration avancées

Utiliser différents Linters et Formateurs

Vous pouvez facilement intégrer d'autres linters et formateurs dans la configuration de votre pre-commit hook. Par exemple, vous pouvez utiliser Stylelint pour l'analyse des fichiers CSS ou SASS :

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Ensuite, mettez à jour votre fichier `lint-staged.config.js` pour inclure Stylelint :

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Exécuter les tests avant le commit

Vous pouvez également exécuter vos tests unitaires dans le cadre du pre-commit hook. Cela aide à garantir que votre code fonctionne correctement avant d'être commité. En supposant que vous utilisez Jest :

            npm install --save-dev jest
            

              
                Copy
              
            
          

Mettez à jour votre fichier `lint-staged.config.js` pour inclure la commande de test :

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

L'option `--findRelatedTests` indique à Jest de n'exécuter que les tests liés aux fichiers modifiés, ce qui accélère considérablement le processus.

Ignorer les Pre-commit Hooks

Dans certains cas, vous pourriez vouloir ignorer temporairement les pre-commit hooks. Vous pouvez le faire en utilisant l'option `--no-verify` avec la commande `git commit` :

            git commit --no-verify -m "Message de commit"
            

              
                Copy
              
            
          

Cependant, il est généralement recommandé d'éviter d'ignorer les hooks, sauf en cas de nécessité absolue, car ils jouent un rôle crucial dans le maintien de la qualité du code.

Dépannage des problèmes courants

• Les hooks ne s'exécutent pas : Assurez-vous que Husky est correctement installé et initialisé, et que le répertoire `.husky` existe à la racine de votre projet. Vérifiez également que le fichier `pre-commit` dans le répertoire `.husky` est exécutable.
• Les erreurs de linting ne sont pas corrigées : Assurez-vous que l'option `--fix` est utilisée avec ESLint, et que votre configuration ESLint est configurée pour corriger automatiquement certains types d'erreurs.
• Prettier ne formate pas les fichiers : Assurez-vous que l'option `--write` est utilisée avec Prettier, et que votre configuration Prettier est correctement configurée.
• Pre-commit hooks lents : Utilisez lint-staged pour n'exécuter les linters et les formateurs que sur les fichiers stagés. Pensez également à optimiser vos configurations ESLint et Prettier pour minimiser le nombre de règles et de paramètres vérifiés.
• Configurations conflictuelles : Assurez-vous que vos configurations ESLint et Prettier ne sont pas en conflit. Si c'est le cas, vous devrez peut-être ajuster une ou les deux configurations pour résoudre les conflits. Envisagez d'utiliser une configuration partagée comme `eslint-config-prettier` et `eslint-plugin-prettier` pour éviter les conflits.

Bonnes pratiques pour les Pre-commit Hooks

• Gardez les hooks rapides : Des hooks lents peuvent avoir un impact significatif sur la productivité des développeurs. Utilisez lint-staged pour ne traiter que les fichiers stagés et optimisez vos configurations de linter et de formateur.
• Fournissez des messages d'erreur clairs : Lorsqu'un hook échoue, fournissez des messages d'erreur clairs et informatifs pour guider les développeurs sur la manière de résoudre les problèmes.
• Automatisez autant que possible : Automatisez le formatage du code et le linting pour minimiser l'effort manuel et garantir la cohérence.
• Éduquez votre équipe : Assurez-vous que tous les membres de l'équipe comprennent le but des pre-commit hooks et comment les utiliser efficacement.
• Utilisez une configuration cohérente : Maintenez une configuration cohérente pour ESLint, Prettier et d'autres outils dans votre projet. Cela aidera à garantir que tout le code est formaté et analysé de la même manière. Envisagez d'utiliser un paquet de configuration partagé qui peut être facilement installé et mis à jour sur plusieurs projets.
• Testez vos hooks : Testez régulièrement vos pre-commit hooks pour vous assurer qu'ils fonctionnent correctement et qu'ils ne causent pas de problèmes inattendus.

Considérations globales

Lorsque vous travaillez dans des équipes distribuées à l'échelle mondiale, tenez compte des points suivants :

• Versions d'outils cohérentes : Assurez-vous que tous les membres de l'équipe utilisent les mêmes versions d'ESLint, Prettier, Husky et lint-staged. Cela peut être réalisé en spécifiant les versions dans votre fichier `package.json` et en utilisant un gestionnaire de paquets comme npm ou yarn pour installer les dépendances.
• Compatibilité multiplateforme : Testez vos pre-commit hooks sur différents systèmes d'exploitation (Windows, macOS, Linux) pour vous assurer qu'ils fonctionnent correctement sur toutes les plateformes. Utilisez des outils et des commandes multiplateformes chaque fois que possible.
• Différences de fuseaux horaires : Soyez conscient des différences de fuseaux horaires lorsque vous communiquez avec les membres de l'équipe au sujet des problèmes de pre-commit hook. Fournissez des instructions claires et des exemples pour les aider à résoudre les problèmes rapidement.
• Support linguistique : Si votre projet implique de travailler avec plusieurs langues, assurez-vous que vos pre-commit hooks prennent en charge toutes les langues utilisées dans le projet. Vous devrez peut-être installer des linters et des formateurs supplémentaires pour chaque langue.

Conclusion

La mise en œuvre de pre-commit hooks est un moyen efficace de garantir la qualité du code, d'améliorer la collaboration en équipe et de réduire les coûts de maintenance dans les projets JavaScript. En intégrant des outils comme ESLint, Prettier, Husky et lint-staged, vous pouvez automatiser le formatage du code, le linting et les tests, en veillant à ce que seul du code de haute qualité soit commité dans votre dépôt. En suivant les étapes décrites dans ce guide, vous pouvez mettre en place un portail de qualité de code robuste qui vous aidera à créer des applications JavaScript plus propres, plus maintenables et plus fiables. Adoptez cette pratique et élevez dès aujourd'hui le workflow de développement de votre équipe.