How I Learned to Stop Worrying and Love Git Hooks

Git is a powerful version control system, but it doesn't inherently guarantee commit quality. You can still commit code with errors, unhelpful messages, or poor formatting. Git hooks provide a solution. This tutorial demonstrates how to implement Git hooks to enforce commit standards, ensuring cleaner codebases and smoother collaboration.

We'll create hooks that only allow commits meeting specific criteria. Failing checks will result in informative error messages guiding you towards correction. As a bonus, passing commits will be automatically formatted.

Prerequisites

Basic familiarity with Node.js, npm, and Git is assumed. If you're unsure about package.json or git commit -m [message], consult the relevant documentation before proceeding.

Our Approach

We'll install dependencies, then set up three commit checks:

1. Linting: Code must be free of linting errors.
2. Unit Tests: Related unit tests must pass.
3. Commit Message Formatting: Messages must adhere to a predefined format (conventional commit format).

Finally, passing commits will be automatically formatted using Prettier. Crucially, these checks only run on staged files, minimizing overhead. The process is stack-agnostic; adapt it to your preferred tools (e.g., Mocha instead of Jest).

Installing Dependencies

First, install Husky (for managing hooks) and lint-staged (for running linters on staged files):

npm i husky lint-staged --save-dev

Next, install commitlint for commit message validation:

npm install @commitlint/{config-conventional,cli} --save-dev

For Windows users:

npm install @commitlint/config-conventional @commitlint/cli --save-dev

Configure commitlint to use the conventional format:

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Implementing Pre-Commit Hooks

Let's assume a package.json with these scripts (adjust to your project):

"scripts": {
  "start": "webpack-dev-server --config ./webpack.dev.js --mode development",
  "build": "webpack --config ./webpack.prod.js --mode production",
  "test": "jest",
  "lint": "tsc --noEmit",
  "prettier": "prettier --single-quote --print-width 80 \"**/*.{js,ts}\" --write"
}

Configure Husky and lint-staged in package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "./**/*.{ts}": [
    "npm run lint",
    "npm run prettier"
  ]
}

This runs lint and prettier on staged TypeScript files before each commit. To include unit tests, add Jest:

"lint-staged": {
  "./**/*.{ts}": [
    "npm run lint",
    "jest --bail --coverage --findRelatedTests",
    "npm run prettier"
  ]
}

For commit message validation, add a commit-msg hook to Husky:

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},

Now, commits will fail if linting errors, failing tests, or improperly formatted commit messages are detected. Prettier automatically formats passing commits. This streamlined workflow significantly improves code quality and team collaboration.

The above is the detailed content of How I Learned to Stop Worrying and Love Git Hooks. For more information, please follow other related articles on the PHP Chinese website!