Comment ajouter des hooks de validation à Git avec Husky pour automatiser les tâches de code

Il existe de nombreux outils pour automatiser nos tâches de code. Nous pouvons vérifier les problèmes de syntaxe avec ESLint et formater notre code avec Prettier.

Mais tous les membres de l'équipe ne se souviendront pas d'exécuter ces commandes à chaque fois qu'ils s'engagent. Comment pouvons-nous utiliser Husky pour ajouter des hooks Git pour les exécuter pour nous?

  • Que sont les Hooks Git?
  • Qu'est-ce que Husky?
  • Qu'allons-nous construire?
  • Étape 0: création d'un nouveau projet
  • Étape 1: Installation de Husky dans un projet
  • Étape 2: Configurer Husky pour exécuter des hooks Git
  • Étape 3: Utilisation de Husky pour formater du code avec Prettier

Que sont les Hooks Git?

Les hooks Git sont des scripts que vous pouvez configurer pour s'exécuter lors de certains événements du cycle de vie Git. Ces événements incluent différentes étapes d'un commit, comme avant un commit (pré-commit) et après un commit (post-commit).

Ils sont utiles dans la mesure où ils permettent aux développeurs d'exécuter des tâches de code personnalisées ou même d'appliquer des normes en automatisant d'autres scripts pour exécuter ces tâches.

Qu'est-ce que Husky?

Husky est un outil qui nous permet de gérer facilement les hooks Git et d'exécuter les scripts souhaités à ces étapes.

Cela fonctionne en incluant un objet directement dans notre package.jsonfichier qui configure Husky pour exécuter les scripts que nous spécifions. Après cela, Husky gère la gestion à quel moment du cycle de vie Git nos scripts seront exécutés.

Qu'allons-nous construire?

Nous allons mettre en place un projet simple que nous pouvons utiliser pour tester les hooks Git.

Bien que vous devriez pouvoir suivre n'importe quel projet avec lequel vous travaillez, je vais utiliser Next.js comme point de départ pour ce projet, simplement pour le fait que nous pouvons exécuter une seule commande pour obtenir un projet commencé.

Une considération concernant le suivi de ce projet, cependant, est que nous utiliserons Prettier comme exemple de ce que vous pouvez faire avec les hooks Git.

Prettier est un outil qui formatera automatiquement notre code pour nous, ce qui, si vous ne vous attendez pas à ce que cela se produise, peut causer beaucoup de stress. Suivre avec moi en utilisant le projet Next.js vous permettra de tester cela sans apporter de modifications involontaires.

En ce qui concerne le test des hooks Git, nous commencerons par ajouter une simple instruction de ligne de commande pour voir Husky travailler. Mais nous allons également tester l'ajout de Prettier, qui formatera automatiquement notre code pour nous.

Enfin, au moment d'écrire ces lignes, Husky a publié une version v5 Alpha de leur solution de hook Git. Étant donné qu'il ne s'agit encore que d'une version Alpha, nous allons aller de l'avant avec la v4, qui nous permet d'installer facilement Husky avec npm.

Étape 0: Comment configurer un nouveau projet

Comme je l'ai mentionné, vous pouvez vraiment suivre les mêmes étapes ici avec tout projet géré avec un package.jsonfichier.

Next.js est absolument exagéré pour cette procédure pas à pas, mais l'objectif est de minimiser les étapes de configuration pour travailler avec Husky.

Pour démarrer avec Next.js, accédez au répertoire dans lequel vous souhaitez démarrer votre projet et exécutez ce qui suit:

yarn create next-app my-husky-project # or npx create-next-app my-husky-project 

Remarque: n'hésitez pas à remplacer my-husky-projectpar ce que vous souhaitez nommer votre répertoire.

Cela créera un nouveau dossier, créera un nouveau projet Next.js et installera toutes les dépendances.

Une fois que c'est fait, accédez à ce nouveau dossier, et nous devrions être prêts à partir!

Suivez le commit.

Étape 1: Comment installer Husky dans un projet

Pour installer Husky, nous pouvons utiliser du fil ou du npm.

yarn add husky # or npm install husky 

Remarque: si l'installation de Husky à ce stade installe la v5, cela signifie que la v5 a été officiellement publiée. Veuillez consulter la documentation Husky mise à jour ou vous pouvez installer la dernière version v4 en spécifiant [email protected] (ou quelle que soit la dernière version) lors de l'installation.

Une fois l'installation du paquet terminée, nous devrions être prêts à utiliser Husky.

Suivez le commit.

Étape 2: Comment configurer Husky pour exécuter des hooks Git

Ensuite, nous allons configurer Husky afin que nous puissions l'utiliser pour nos hooks Git.

À l'intérieur de notre package.jsonfichier, créez une nouvelle propriété appelée huskyavec un objet vide.

"husky": {},

Vous pouvez l'ajouter vraiment où vous voulez dans le package.jsonfichier, mais je vais l'ajouter juste en dessous de la scripts  propriété afin que je puisse les gérer plus facilement ensemble.

À l'intérieur de cela, nous voulons ajouter une autre propriété appelée hooksqui spécifie également un objet vide:

"husky": { "hooks": {} }, 

C'est là que nous allons ajouter nos hooks Git. Husky prend en charge à peu près tous les hooks Git définis par Git, nous pouvons donc être aussi flexibles que nous le souhaiterions dans notre flux d'événements Git.

Pour tester cela, j'ai créé une nouvelle branche dans laquelle j'ai littéralement ajouté chaque hook Git de cette page, y compris un script qui écrit simplement sur le terminal [Husky] event name.

Remarque: ne vous sentez pas obligé de faire cela à moins que vous ne soyez curieux. Le but est de pouvoir vous montrer avec mon exemple comment cela fonctionne.

“husky”: { “hooks”: { “applypatch-msg”: “echo \”[Husky] applypatch-msg\””, “pre-applypatch”: “echo \”[Husky] pre-applypatch\””, “post-applypatch”: “echo \”[Husky] post-applypatch\””, “pre-commit”: “echo \”[Husky] pre-commit\””, 

Ce que cela fera, c'est dire à Husky qu'à chaque étape où nous sommes autorisés à nous connecter à Git, dites-nous!

Lorsque je valide ce changement, nous pouvons voir immédiatement que Husky déclenche certains de nos scripts.

These are all of the events that Git allows us to hook into that happen during the commit process.

And similarly, if I push those changes out to Github, I can see that the push process runs the pre-push hook!

You may never use most of the hooks that Husky and Git provide (we only saw a few between those two commands).

But it’s awesome to be able to see how powerful this can be, whether it’s running code that formats our code, prevents secret access keys from being committed, or really anything else that can help automate important tasks to your workflow.

We can now see that we can configure Husky by specifying the configuration and the hooks right in our package.json.

Follow along with the commit.

Note: If you want to check out my branch that includes every Git hook to test with, you can find it on Github.

Step 3: How to use Husky to format code with Prettier

Finally, for a real-world use case, we’re going to test out using Prettier to automatically format our code.

Prettier is an opinionated code formatting tool that allows you to easily clean up your code to make it look like a single person wrote it.

Why are tools like Prettier important? When working through code, especially with a team, it’s important to maintain consistency so everyone knows what to expect. It will help prevent arguing over a semi-colon in a code review, but it will also help catch syntax errors and prevent bugs.

Warning: running Prettier will automatically format all of your code. While we’re going to test this out before committing the changes, once you apply this as a Git Hook, it will automate this process.

To get started with Prettier, let’s install it with our package manager:

yarn add prettier -D # or npm install prettier --save-dev 

Note: we’re installing Prettier as a devDependency as our application doesn’t need this to run.

Next, we can add a new script in our package.json that will make it easier to run Prettier to test this out.

Inside the scripts property, add:

"lint": "prettier --check ." 

For this first test, we’re going to run it as a “check” which will allow us to see which files would change.

Run the following:

yarn lint # or npm run lint 

And once we do, we can see that Prettier is telling us that would change the files listed.

At this point, our code will remain unchanged. But if we want to run Prettier for real to make those changes, we can first add an additional script:

"format": "prettier --write ." 

And if we run that script, it will update all of those files to format the code to Prettier’s specification.

Warning: just another note, running Prettier to write the changes will make changes in your files. These are all code-style changes that shouldn’t impact how the code runs, but how the code looks. Before running format, you should save any changes by committing with Git so that you can easily revert the changes if you’re not happy with them.

You can now run the script with:

yarn format 

And we can see that Prettier updated our files!

Now the part that’s relevant to this walkthrough: we can add this as a Git hook. This way, when someone tries to commit code, Prettier is run before the code is saved. This means that we’ll always keep code consistent with Prettier’s formatting style.

Inside our Husky hooks configuration, let’s add:

"husky": { "hooks": { "pre-commit": "prettier --write . && git add -A ." } }, 

If you notice in our pre-commit hook, we’re also adding git add -A ..

When Husky runs, it simply runs the script provided. When running our Prettier command, we’re only formatting the code, but we never save those changes as part of the process. So we use git add to store all of those changes and include them in the commit.

To test this out, I reverted the changes to all of the files that were formatted before. If you’re following along with the same project, you can run:

git checkout pages 

Which will reset all of the changes in pages to the last commit.

Now, let’s try to add all of our files with Git and commit the changes.

And once we run our commit command, we can see that the Husky pre-commit hook kicks in already and formats our code!

Follow along with the commit.

What can I do next?

Use lint-staged to only run formatting on changed files

We’re using Prettier right in our pre-commit hook and specifying . which means it’s going to run on all files every time.

We can use a tool called lint-staged, which allows us to still run our Git hooks with Husky, but it will only run on files that are staged.

For instance, if we wanted to do this with Husky and Prettier, our configuration might look like:

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*": "prettier --write" }, 

As part of how lint-staged runs, it will attach the changed files to the end of our Prettier statement automatically for us.

You’ll also notice we didn't include git add. lint-staged will also add any changes to Git for us automatically.

Set up a Prettier config to customize formatting rules

Prettier is very opinionated. There are some things I personally don’t prefer and you might feel the same.

Luckily, Prettier allows you to set up a configuration file that can override some of those files to make your code just the way you and your team want it.

Tell Prettier to ignore files with .prettierignore

You also probably don’t want Prettier running on “all the things” (maybe you do).

Prettier allows you to set up a .prettierignore  file right inside of the root of the project next to package.json, similar to .gitignore, that allows you to tell Prettier what files it should not run on.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me