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:

1. Husky integrates with Git and listens to commit events. When a git commit is triggered, Husky activates its configured hook.
2. That hook runs lint-staged, which checks which files are staged for commit.
3. lint-staged then applies tools like ESLint or Prettier only on those files.
4. 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.