Using Lint-staged + Husky + Git Hooks

If you work with JavaScript you probably already heard about the powerful combination of ESLint + Prettier right? If so, skip to Validating rules on Commit, where I explain what each of these tools has to do with ESLint, otherwise keep reading because I'll post a brief overview on them first.

ESLint

ESlint is, according to their own docs, an open source project that helps you find and fix problems within your JS code before even running it. Besides finding errors, it also helps you to enforce custom rules for your codebase, such as using tabs instead of spaces, for example.

Prettier

Prettier is an opinionated code formatter which can be easily configured to apply and fix indentation rules on your codebase every time you save your file.

Validating rules on Commit

One of the Linters main features is to prevent files with errors from being published in production, breaking your application or causing some unwanted effect. When using ESLint, for example, it is possible to view the existing errors in a given file in the IDE itself. However, it is still possible to ignore these errors and commit the broken file, so what to do?

A possible solution is to validate these files using a Git Hook called pre-commit, which can be used to validate the syntax and code patterns of the files being changed before they are actually committed, and if there are any errors, the commit is cancelled.

This is where the combination of Lint-staged + Husky + Git Hooks comes in!

Lint-staged ⛔💩

Lint-staged is a library that validates lint rules on modified files that have not yet been committed but have been already staged, preventing the user from commiting broken code.

According to the library's own documentation, it makes much more sense to validate these rules before commit to prevent code with errors from being published in your repository.

Husky 🐺

Husky is a library that makes working with Git hooks easy.

There are several hooks that can be implemented in your Git repository, but the one we will be using in this article is pre-commit, which is the first commit hook invoked. This hook is called before you enter a commit message and is usually used to run automated tests or to validate the source code being committed.

Setting it up

To start using Lint-staged + Husky it's necessary that you have a repository using Git and that both ESLint and Prettier are configured already. In your project's terminal run the following command, it will automatically configure Lint-staged and Husky for your:

npx mrm lint-staged

Take a look at the package.json file once the command finishes executing. If everything went right there should be two new development dependencies and two new properties: husky and lint-staged.

Let's change the lint-staged property to automatically indent the source code using Prettier, this way on the pre-commit the source code will be validated with ESLint and automatically formatted with Prettier. To achieve this, just add the following line in the lint-staged settings:

"*.{json,js}": ["prettier --write"]

Now change a file in your project and force an error, such as calling a non-existing method or invoking an undefined variable. Add the file to the Git changelist and try to commit as usual If everything was configured correctly you will see an message similar to this one indicating the errors that prevent you from committing the file:

If you were able to see this error message, congratulations! You've guaranteed that from now on nobody will commit files with errors or outside the standards defined by your team.

Example repository

I created an example repository with all the settings described on this article. Feel free to check it out and suggest any improvements, all suggestions are welcome.

lucasadrianof/exemplo-eslint-staged-husky

If you liked this article please consider giving a ⭐ to the project on GitHub :)