Imagine working on a large- scale project and every time you pull the code from git, you are greeted with a mountain of unresolved lint errors. Well, in a large project with multiple developers, enforcing code standards manually is simply not scalable. This is where pre-commit hooks come in.
By using tools like Husky, you can automatically enforce operations like linting, testing, formatting checks before any code gets committed to the repository. It also ensures that everyone on the team adheres to the same standards.
In this article, we are going to see how to set up sequential pre-commit hooks using Husky, especially for large projects where multiple checks are needed. We’ll also look into the optimisation of these hooks for performance.
What Are Pre-Commit Hooks?
Pre-Commit Hooks are nothing but automated scripts that run even before you commit your code to a git repository. They act like a security guard, who prevent coding chaos by catching issues before they 'enter' your project.
Setting Up Sequential Pre-Commit Hooks with Husky
Pre-commit hooks can be incredibly useful, but setting up Git hooks manually for each project is another tedious job. Enter Husky - the vigilant watchdog.
Husky is a popular tool that allows you to run scripts at various stages of your development process. It automates the process of enforcing code quality and consistency in JavaScript projects. It provides support for various hooks such as Pre-commit hooks, Commit-msg hooks, Pre-push hooks etc. It can easily integrate with popular tools in the JavaScript ecosystem.
Sequential execution of pre-commit hooks runs tasks in a clear order, helping to catch errors before they pile up. This gives developers quick feedback to fix issues, keeping the code base clean before commits. Overall, it makes the process more efficient and easier to maintain.
Prerequisites for Using Pre-Commit Hooks with Husky
Before you start configuring pre-commit hooks in your JavaScript project using Husky, make sure you have the following tools and dependencies installed.
- Ensure you have Node.js and npm (Node Package Manager) installed:
-
If you want to lint your JavaScript code, install ESLint:
npm install eslint --save-dev -
For code formatting, install Prettier:
npm install prettier --save-dev -
Scripts in package.json: Add the following scripts to your package.json to ensure the format, lint, and test commands are available:
{ "scripts": { "format": "prettier --write .", "lint": "eslint .", "test": "your-test-command" // Replace with your actual test command } }
Setting Up Husky
-
Install Husky:
npm install husky --save-dev -
Initialise Husky:
npx husky init - Navigate to the .husky directory in the root of your project.
-
Edit the pre-commit File:
#!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run format && npm run lint && npm run test
Here’s what each line does:
- #!/bin/sh: This line indicates that the script should be run using the shell.
- . "$(dirname "$0")/_/husky.sh": This line sources Husky's shell script, which sets up the environment for the hooks.
- npm run format && npm run lint && npm run test: This is your command sequence that runs formatting, linting, and testing.
Performance Optimisation using Custom Scripts
When using pre-commit hooks in large projects, especially in SaaS applications or micro service-based architectures, performance can become a concern. Pre-commit hooks that run time-consuming tasks (like linting, testing, or formatting) across the entire code base may slow down the development workflow resembling a slow-motion chase scene!
Optimising the performance of pre-commit hooks using custom scripts can significantly enhance the efficiency of your development workflow. One of the way is to run hooks conditionally based on changed files.
# Check for changes in specific directories
if git diff --cached --name-only | grep -q 'serviceA/';
then
npm run lint:serviceA
npm run test:serviceA
fi
if git diff --cached --name-only | grep -q 'serviceB/';
then
npm run lint:serviceB
npm run test:serviceB
fi
This script checks for changes in serviceA and serviceB, running only the relevant lint and test commands.
In conclusion, pre-commit hooks are like the unsung heroes of the development process.
As I’m still on my journey of learning and levelling up, I’d love to hear your suggestions or tips! Got a trick I missed? Share it with me.
