Hey devs! 👋 Ever committed code and realized later you forgot to run your linter or formatter? 😅 Let's fix that! Husky 🐶 can automate these checks for you, so your codebase stays clean and consistent—without you even thinking about it.

🧐 What is Husky (and Git Hooks)?

Husky is a tool that lets you run scripts automatically before you commit or push code. Think of it as a helpful guard dog that barks if something's off before your code gets into the repo.

Git Hooks Explained: Git hooks are scripts that Git executes before or after events such as commit, push, and receive. They're a built-in feature of Git that allows you to customize Git's internal behavior and trigger custom actions at critical points in the development lifecycle. Husky makes it easier to manage these hooks.

💡 Use Cases for Husky

• Consistent Code Style Across Teams: Enforce Prettier or your favorite formatter to maintain a uniform code style, regardless of who's contributing.

• Prevent Errors in Production: Automatically lint code to catch issues before they make it to the main branch, reducing the risk of bugs.

• Readable and Maintainable Commit History: Enforce commit message rules to ensure a clear and consistent commit history, making it easier to understand changes over time.

• Automated Testing: Run tests before each commit to ensure that new changes don't break existing functionality.

• Security Checks: Integrate security linters to automatically scan for vulnerabilities before code is committed.

🚀 Let's Set Up Husky (Step by Step)

1️⃣ Install Husky

Add Husky to your project:

npm install --save-dev husky

Husky will help you manage Git hooks for your project.

2️⃣ Enable Husky Git Hooks

Set up Husky to use Git hooks:

npm set-script prepare "husky install"
npm run prepare

• npm set-script prepare "husky install": Adds a script to your package.json called "prepare". This ensures Husky is set up every time someone installs dependencies.
• npm run prepare: Runs the "prepare" script right now to set up Husky immediately.

Troubleshooting: If npm run prepare fails, make sure you have the latest version of npm installed. Try running npm install -g npm@latest and then try npm run prepare again.

Set Up Pre-commit Hook with Linting Example

Let's create a pre-commit hook that runs linting before every commit.

First, install ESLint:

npm install --save-dev eslint
npx eslint --init

Add a lint script to your package.json:

"scripts": {
  "lint": "eslint ."
}

Create the pre-commit hook:

npx husky add .husky/pre-commit "npm run lint"
git add .husky/pre-commit

What these commands do:

• npx husky add .husky/pre-commit "npm run lint": Creates a file called pre-commit in the .husky folder that will run npm run lint before every commit.
• git add .husky/pre-commit: Stages the hook file so it gets committed to your repository and shared with your team.

You can add multiple commands to your pre-commit hook like this:

npx husky add .husky/pre-commit "npm run lint && npm run format && npm run test"

Examples of scripts you can add to your package.json:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write .",
  "test": "jest",
  "build": "webpack --mode production",
  "type-check": "tsc --noEmit"
}

Now, every time you commit, Husky will automatically run your linter first! If the linting fails, the commit will be blocked until you fix the issues.

🧩 Other Tools You Can Integrate with Husky

• Code Formatting: Use Prettier to automatically format your code.
• Commit Message Linting: Use commitlint to enforce commit message standards.
• Security Checks: Use eslint-plugin-security to detect security vulnerabilities.
• Testing: Run your test suite before commits to ensure nothing breaks.

🎉 That's It!

Now, every time you commit, Husky will make sure your code is clean and follows your project's standards. No more "oops, forgot to lint!" moments. 🚫🐛

Give it a try and let your codebase thank you!

Questions? Drop them below! 👇

📚 Further Reading

• Husky Official Documentation
• Git Hooks Documentation
• ESLint Getting Started Guide
• Prettier Configuration

🏷️ Tags

#Husky #GitHooks #CodeQuality #Linting #JavaScript #Development #Automation