Elevate Your Code Quality with Husky

Source: Dev.to

Introduction

In modern software development, maintaining code quality isn’t just a nice‑to‑have—it’s essential. As teams grow and codebases expand, ensuring consistent standards, preventing bugs, and keeping a clean commit history become increasingly challenging. Husky acts as your project’s quality gatekeeper by leveraging Git hooks.

Installing Husky

npm install --save-dev husky
npx husky init

This creates a .husky directory in your project root with sample hooks. Unlike the old .git/hooks directory, this folder is version‑controlled and shared with your team.

Project Structure

your-project/
├── .husky/
│   ├── pre-commit
│   ├── pre-push
│   └── commit-msg
├── package.json
└── …

Each file in .husky corresponds to a Git hook.

Prettier

Installation

npm install --save-dev prettier

Configuration (.prettierrc)

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

Husky Integration

Create or update .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx prettier --write --ignore-unknown "**/*"

Now every commit will be automatically formatted.

ESLint

Installation

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

Sample Configuration (.eslintrc.json)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "prefer-const": "error"
  }
}

Husky Integration

Update .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run ESLint on staged files
npx eslint . --ext .js,.jsx,.ts,.tsx --fix

# Run Prettier
npx prettier --write --ignore-unknown "**/*"

# Stage any fixes
git add -A

lint‑staged

Running linters on the entire codebase before every commit is slow and unnecessary. lint-staged runs them only on staged files, dramatically improving performance.

Installation

npm install --save-dev lint-staged

Configuration (in package.json)

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

Husky Integration

Update .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

This setup is fast, efficient, and only touches relevant files.

TypeScript Projects

Add type checking to the pre‑commit hook:

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "tsc --noEmit",
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Conclusion

Husky and automated quality checks aren’t about being pedantic—they’re about making your team more efficient, your code more reliable, and your releases more confident. By catching issues early, you shift quality left in the development process, reducing bugs, improving collaboration, and ultimately shipping better software.

The initial setup may feel like extra work, but the return on investment is immediate: less time spent on formatting debates and preventable bugs, and more time building features that matter. Start small, add tools incrementally, and watch your code quality and team productivity soar.