Cómo agregar enlaces de confirmación a Git con Husky para automatizar las tareas de código

Hay muchas herramientas para automatizar nuestras tareas de código. Podemos comprobar si hay problemas de sintaxis con ESLint y formatear nuestro código con Prettier.

Pero no todos en el equipo recordarán ejecutar esos comandos cada vez que se comprometan. ¿Cómo podemos usar Husky para agregar ganchos de Git para ejecutarlos por nosotros?

  • ¿Qué son los Git Hooks?
  • ¿Qué es Husky?
  • ¿Qué vamos a construir?
  • Paso 0: configurar un nuevo proyecto
  • Paso 1: Instalación de Husky en un proyecto
  • Paso 2: configurar Husky para ejecutar ganchos de Git
  • Paso 3: uso de Husky para formatear el código con Prettier

¿Qué son los Git Hooks?

Los ganchos de Git son scripts que puede configurar para que se ejecuten en determinados eventos del ciclo de vida de Git. Estos eventos incluyen diferentes etapas de una confirmación, como antes de una confirmación (pre-confirmación) y después de una confirmación (post-confirmación).

Estos son útiles porque permiten a los desarrolladores ejecutar tareas de código personalizadas o incluso hacer cumplir los estándares automatizando otros scripts para ejecutar esas tareas.

¿Qué es Husky?

Husky es una herramienta que nos permite disputar fácilmente ganchos de Git y ejecutar los scripts que queremos en esas etapas.

Funciona al incluir un objeto dentro de nuestro package.jsonarchivo que configura Husky para ejecutar los scripts que especificamos. Después de eso, Husky se encarga de administrar en qué punto del ciclo de vida de Git se ejecutarán nuestros scripts.

¿Qué vamos a construir?

Vamos a configurar un proyecto simple que podemos usar para probar los ganchos de Git.

Si bien debería poder seguir cualquier proyecto con el que esté trabajando, usaré Next.js como punto de partida para este proyecto, simplemente por el hecho de que podemos ejecutar un solo comando para obtener un proyecto empezado.

Sin embargo, una consideración sobre seguir este proyecto es que usaremos Prettier como ejemplo de lo que puede hacer con los ganchos de Git.

Prettier es una herramienta que formateará automáticamente nuestro código para nosotros, lo cual, si no esperas que eso suceda, puede causar mucho estrés. Seguir conmigo usando el proyecto Next.js le permitirá probar esto sin realizar cambios involuntarios.

En cuanto a probar los ganchos de Git, comenzaremos agregando una declaración de línea de comando simple para ver cómo funciona Husky. Pero también probaremos la adición de Prettier, que formateará automáticamente nuestro código para nosotros.

Finalmente, al momento de escribir esto, Husky lanzó una versión v5 Alpha de su solución de gancho Git. Dado que todavía es solo una versión Alpha, avanzaremos con la v4, que nos permite instalar Husky fácilmente con npm.

Paso 0: Cómo configurar un nuevo proyecto

Como mencioné, realmente puede seguir los mismos pasos aquí con cualquier proyecto que se administre con un package.jsonarchivo.

Next.js es absolutamente exagerado para este tutorial, pero el objetivo es minimizar los pasos para configurarlo para que funcione realmente con Husky.

Para comenzar con Next.js, navegue hasta el directorio en el que desea iniciar su proyecto y ejecute lo siguiente:

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

Nota: siéntase libre de reemplazar el nombre my-husky-projectque desee para su directorio.

Esto creará una nueva carpeta, creará un nuevo proyecto Next.js e instalará todas las dependencias.

Una vez hecho esto, navegue hasta esa nueva carpeta, ¡y deberíamos estar listos para comenzar!

Siga junto con el compromiso.

Paso 1: Cómo instalar Husky en un proyecto

Para instalar Husky, podemos usar yarn o npm.

yarn add husky # or npm install husky 

Nota: si la instalación de Husky en este punto instala la versión 5, eso significa que la versión 5 se ha lanzado oficialmente. Consulte la documentación actualizada de Husky o puede instalar la última versión v4 especificando [email protected] (o cualquiera que sea la última versión) al instalar.

Una vez que el paquete haya terminado de instalarse, deberíamos estar listos para usar Husky.

Siga junto con el compromiso.

Paso 2: Cómo configurar Husky para ejecutar ganchos de Git

A continuación, configuraremos Husky para poder usarlo para nuestros ganchos de Git.

Dentro de nuestro package.jsonarchivo, cree una nueva propiedad llamada huskycon un objeto vacío.

"husky": {},

Puede agregar esto realmente donde quiera en el package.jsonarchivo, pero lo voy a agregar justo debajo de la scripts  propiedad para que pueda administrarlos juntos más fácilmente.

Dentro de eso, queremos agregar otra propiedad llamada hooksque también especifica un objeto vacío:

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

Aquí es donde vamos a agregar nuestros ganchos de Git. Husky admite prácticamente todos los ganchos de Git definidos por Git, por lo que podemos ser tan flexibles que nos gustaría dentro de nuestro flujo de eventos de Git.

Para probar esto, creé una nueva rama donde literalmente agregué cada gancho de Git de esa página, incluido un script que simplemente escribe en la terminal [Husky] event name.

Nota: no sienta que necesita hacer esto a menos que tenga curiosidad. El objetivo es poder mostrarte con mi ejemplo cómo funciona.

“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\””, 

Lo que esto hará es decirle a Husky que en cada etapa en la que se nos permita conectarnos a Git, ¡díganos!

Cuando realizo ese cambio, podemos ver inmediatamente que Husky dispara algunos de nuestros guiones.

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