Lefthook: benefits vs husky and how to use

In the world of Git hooks, two popular tools often come up: Lefthook and Husky. Both are designed to manage Git hooks efficiently, but they have different features and use cases. This article will compare the benefits of Lefthook over Husky and provide a step-by-step guide on how to use Lefthook in your projects.

Benefits of Lefthook vs Husky

1. Performance
   Lefthook is known for its performance. It is written in Go, which makes it faster and more efficient compared to Husky, which is written in JavaScript. This can be particularly beneficial for large projects with many hooks.

2. Parallel Execution
   Lefthook supports parallel execution of hooks out of the box. This means that multiple hooks can run simultaneously, reducing the overall time taken for pre-commit or pre-push operations. Husky, on the other hand, executes hooks sequentially.

3. Configuration
   Lefthook uses a YAML configuration file, which is straightforward and easy to read. Husky uses a JSON configuration, which can be less intuitive for some users.

4. Language Agnostic
   While Husky is tightly integrated with Node.js and npm, Lefthook is language-agnostic. This makes Lefthook a better choice for projects that are not primarily JavaScript-based.

5. Flexibility
   Lefthook provides more flexibility in terms of hook management. It allows you to define hooks for different environments and conditions, making it a versatile tool for various workflows.

How to Use Lefthook

Step 1: Install Lefthook

First, you need to install Lefthook, one of the most used ways is with NPM:

npm i -D lefthook

You can check the other methods here.

Step 2: Install Dependencies

Before setting up our scripts, we need to install the necessary dependencies. Typically, we use ESLint and Prettier for code linting and formatting. Install these dependencies by running:

npm i -D eslint prettier

Step 3: Add lint and format scripts to package.json

Typically, in our projects at Quave, we include three scripts in our package.json file: one for ESLint, one for Prettier, and a combined script that runs both. This combined script is usually what we use as our pre-commit hook. Here's how you can set up these scripts:

Add the following to your package.json file:

"scripts": {
  "lint": "eslint . --fix",
  "format": "prettier --write \"**/*.js\"",
  "check-code": "npm run lint && npm run format",
},

These scripts allow you to:

1. Run ESLint with auto-fix (lint)
2. Run Prettier to format your code (format)
3. Run both lint and format in sequence (check-code)

The check-code script is what we typically use in our pre-commit hook to ensure both linting and formatting are performed before each commit.

Step 4: Configure Lefthook

Create a lefthook.yml file in the root of your project. This file will define the hooks you want to use. Here is an example configuration:

pre-commit:
  commands:
    check-code:
      run: npm run check-code
    update-index:
      run: git update-index --again

This is a base example that we use here at Quave. We added the check-code to run our eslint and prettier.

The update-index command is crucial here. When we run ESLint with the --fix option and Prettier, they modify our files to fix linting issues and format the code. These modifications would normally be left unstaged, meaning they wouldn't be included in the current commit. By running git update-index --again, we ensure that these automatic fixes are included in the current commit. This prevents a situation where you'd have pending changes to commit immediately after making a commit.

Step 5: Initialize Lefthook

Navigate to your project directory and initialize Lefthook:

lefthook install

This command will create a .lefthook directory in your project.

Step 6: Use Quave ESLint config (Optional, but recommended)

Install the npm dependency

npm i -D @quave/eslint-config-quave

Add to the root of your package.json

  "eslintConfig": {
    "extends": [
      "@quave/quave"
    ]
  },

Create in the root of your project prettier.config.js file and paste this

module.exports = require('@quave/eslint-config-quave/prettier.config')

Also, you can create a file called .prettierignore, this file is used to tell Prettier to ignore certain files or directories from being formatted.

Step 7: Run Lefthook

Now, when you commit or push changes, Lefthook will automatically run the defined hooks. You can also manually run Lefthook to test your configuration:

lefthook run pre-commit

Conclusion

Lefthook offers several advantages over Husky, including better performance, parallel execution, and greater flexibility.

By following the steps outlined above, you can easily set up and configure Lefthook in your project, ensuring that your Git hooks run efficiently and effectively.

Whether you are working on a small project or a large codebase, Lefthook can help streamline your development workflow.