Introduction
Ever accidentally pushed code that breaks the app or fails linting? Yeah, we've all been there. That's where pre-commit hooks come in. Think of them as a safety net that checks your code before you commit it.
In this blog, we'll demystify pre-commit hooks, explain why they matter and show how they work using Husky and lint-staged for tasks like:
- Code formatting with Prettier
- Linting with ESLint
- Spell checking or custom scripts
What Are Pre-commit Hooks?
Pre-commit hooks are scripts that run before you commit your code. They help you catch issues early-before your changes are saved into version control.
These hooks are part of Git's hook system and can automate actions such as:
- Formatting code using Prettier
- Checking for errors using ESLint
- Running tests
- Avoiding committing large or sensitive files
They ensure every piece of code pushed is clean, consistent and error-free.
Tools Commonly Used
To implement pre-commit hooks effectively in JavaScript/TypeScript projects, developers often use the following tools:
| Tool | Purpose |
|---|---|
| Husky | Manages Git hooks with ease |
| Prettier | Auto-formats your code |
| ESLint | Catches JavaScript/TypeScript errors |
These tools work together to provide a robust, automated code-checking system.
Understanding the Workflow
Here's a simplified theory of how pre-commit hooks work using Husky and lint-staged:
- Husky integrates with Git and listens to commit events. When a
git commitis triggered, Husky activates its configured hook. - That hook runs lint-staged, which checks which files are staged for commit.
- lint-staged then applies tools like ESLint or Prettier only on those files.
- If everything passes, the commit proceeds. If something fails, the commit is blocked.
This means no messy code gets into your repo unnoticed.
Example Use Case
Imagine you're working on a JavaScript project. You accidentally forget to format your code and leave a missing semicolon.
Without pre-commit hooks: You commit the change and the reviewer later finds the issue.
With pre-commit hooks:
- Husky runs the pre-commit script.
- lint-staged checks the staged file with ESLint.
- ESLint finds the error and stops the commit.
- You fix the issue and the commit goes through.
You just avoided a broken commit without even thinking about it.
Going Beyond: Add Spell Check or Custom Scripts
You can extend the workflow by integrating tools like cspell for spell checking or running custom shell scripts.
For example, you could:
- Check spelling in markdown and code comments.
- Prevent committing large files.
- Run security scans.
These extras enhance code quality and catch issues you might not notice manually.
Benefits at a Glance
| Benefit | Why It Helps |
|---|---|
| Cleaner code | Automated formatting & linting |
| Fewer mistakes | Catches errors early |
| Consistency | Everyone follows the same rules |
| Saves time | No manual checks |
| No bad commits | Prevents bad code from reaching repo |
Final Thoughts
Pre-commit hooks are a developer's best friend when it comes to enforcing code quality. Tools like Husky and lint-staged remove the manual burden of remembering to format or lint your code.
They're easy to set up, simple to maintain and make your whole team look good.
Start small-maybe just with Prettier and ESLint. Once you see how seamless it is, you'll start adding more tools to your commit workflow.
