How to Add ESLint to Husky Pre-Commit Hooks

Introduction

Using Husky pre-commit hooks is a powerful way to enforce code standards and ensure your project maintains a high level of quality. By integrating ESLint with Husky pre-commit hooks, you can automate code linting, which catches errors and enforces consistent styling before code reaches your repository. In this guide, we’ll walk through the steps to add ESLint to Husky pre-commit hooks, ensuring your code is clean and maintainable right from the start.

Why Use ESLint with Husky Pre-Commit Hooks?

Adding ESLint to your Husky pre-commit hooks enables automatic code checks every time a developer commits code, ensuring it meets project standards and reducing potential errors in production. This approach creates a seamless workflow where developers get immediate feedback on their code style and quality, which saves time and improves the team’s overall productivity.

Steps to Add ESLint to Husky Pre-Commit Hooks

Here’s a step-by-step guide on setting up Husky pre-commit hooks with ESLint:

1. Install Husky and ESLint

Start by installing both Husky and ESLint. Use the following commands:

codenpm install husky --save-dev
npm install eslint --save-dev

These commands add Husky pre-commit and ESLint dependencies to your project.

2. Initialize Husky

To enable Husky pre-commit hooks, initialize Husky in your project:

codenpx husky install

This command creates a .husky directory, where your hooks will be stored.

3. Add ESLint Configuration

If you haven’t already configured ESLint, you can do so by running:

codenpx eslint --init

Follow the prompts to set up ESLint with your preferred configuration. ESLint will generate a .eslintrc file with all the rules you specified. This configuration ensures that Husky pre-commit runs according to your linting standards.

4. Create a Pre-Commit Hook with Husky

Now, create a Husky pre-commit hook to run ESLint every time a commit is made. Use the command below:

bashCopy codenpx husky add .husky/pre-commit "npx eslint ."

This command creates a pre-commit file inside the .husky folder, with the command to run ESLint on all files in your project.

5. Test the Husky Pre-Commit Hook

Make some changes to a file in your project, then commit the changes using:

codegit add .
git commit -m "Test Husky pre-commit with ESLint"

If there are any linting errors, Husky pre-commit will block the commit, prompting you to resolve them first. This ensures your code quality is maintained right from the start.

Customizing Husky Pre-Commit Hook for ESLint

To optimize your Husky pre-commit configuration, you can specify which files to lint, or add other commands to streamline the process.

For instance, to lint only JavaScript files, update your pre-commit command as follows:

codenpx husky add .husky/pre-commit "npx eslint '**/*.js'"

You can also add other commands to run in sequence, such as npm test, to enforce both linting and testing with every commit.

Table of Husky Pre-Commit Commands

Tips for Effective Husky Pre-Commit and ESLint Integration

1. Scope Linting to Changed Files: Use lint-staged to run ESLint only on staged files for faster commits:bashCopy codenpx mrm lint-staged Then update your .husky/pre-commit to use npx lint-staged.
2. Customize ESLint Rules: Tailor ESLint rules to your project needs in .eslintrc. This ensures Husky pre-commit runs based on your exact code quality expectations.
3. Add Other Checks: Include tests, formatters, or type checkers in Husky pre-commit hooks for a robust pipeline.
4. Prevent Large Commits: Set a file limit in Husky pre-commit hooks to avoid committing excessively large changes at once.
5. Enforce Code Consistency: Use Prettier alongside ESLint in Husky pre-commit to maintain consistent code formatting.

Conclusion

Incorporating ESLint into Husky pre-commit hooks is an excellent way to automate code quality checks and keep your codebase clean. By following this setup guide, you ensure that all committed code meets your project’s standards. This proactive approach helps maintain a robust codebase, reduces errors, and improves team productivity. Now, your Husky pre-commit setup with ESLint is ready to go, ensuring consistent quality with every commit!

With these steps, you’ll be well on your way to building an efficient workflow using Husky pre-commit and ESLint.