Automatic Code Formatting on Commit Setup

Automatic Code Formatting on Commit

Code style debates in PR reviews waste reviewers' time. Automatic formatting on commit eliminates this: code always conforms to standard, regardless of developer's editor settings.

Formatting Tools

JavaScript / TypeScript — Prettier for formatting, ESLint for linting. They solve different problems: Prettier controls appearance (indents, quotes, semicolons), ESLint — code quality (unused variables, potential bugs).

Python — Black for formatting (zero-config), isort for import sorting, Ruff as fast replacement for both.

PHP — PHP CS Fixer or Pint (Laravel-first, based on CS Fixer).

Go — gofmt built into language, goimports adds import management.

Husky + lint-staged: Standard for Node.js Projects

npm install --save-dev husky lint-staged
npx husky init

.husky/pre-commit:

#!/bin/sh
npx lint-staged

package.json:

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

lint-staged processes only staged files — doesn't format entire project per commit. Critically important for speed.

pre-commit Framework: Universal Solution

For mixed projects or Python ecosystem — pre-commit:

# .pre-commit-config.yaml
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.5.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-merge-conflict

  - repo: https://github.com/psf/black
    rev: 24.3.0
    hooks:
      - id: black

  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.3.0
    hooks:
      - id: ruff
        args: [--fix]

pip install pre-commit
pre-commit install  # Installs hooks in .git/hooks

Prettier Configuration

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

.prettierignore:

dist/
build/
node_modules/
*.min.js

CI Synchronization

Local hooks easily bypassed via --no-verify. In CI add separate check:

- name: Check formatting
  run: npx prettier --check .
- name: Check lint
  run: npx eslint .

CI doesn't auto-format — only checks and fails on violations. This motivates developers not to bypass local hooks.

Timeline

Husky + lint-staged + Prettier + ESLint setup for JavaScript/TypeScript — 2–4 hours. pre-commit setup for Python or PHP — 2–4 hours. Integration of checks into GitHub Actions CI — 1–2 hours.