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
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.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.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.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.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:
- Run ESLint with auto-fix (
lint
) - Run Prettier to format your code (
format
) - 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 runninggit 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.
Top comments (0)