How to Set Up Pre-Commit Hooks with Airbnb ESLint

Configure a Git pre-commit hook that runs npm run lint using eslint-config-airbnb to automatically block commits containing JavaScript style violations.

The airbnb/javascript repository distributes one of the industry's most widely adopted JavaScript style guides as the shareable ESLint configuration eslint-config-airbnb. To guarantee that every commit adheres to these rigorous coding standards, you can leverage Git's hook system to execute linting before changes are permanently recorded. This guide demonstrates how to implement this enforcement using the exact files and scripts maintained in the Airbnb source code.

Install the Airbnb ESLint Configuration

Before configuring hooks, you must install the style guide and its required peer dependencies. According to the peerDependencies declared in packages/eslint-config-airbnb/package.json, you need the base config plus several essential plugins.

Execute the following command to install all required packages:

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Configure ESLint to Extend Airbnb Rules

The repository provides a minimal configuration reference in linters/.eslintrc that demonstrates the proper way to extend the Airbnb ruleset. Create an .eslintrc file in your project root containing:

{
  "extends": "airbnb"
}

This single line activates all of Airbnb's linting rules, including their strict React and ES6+ requirements.

Create the Pre-Commit Hook

The airbnb/javascript repository includes a Git hook template at .git/hooks/pre-commit.sample that serves as the foundation for automated linting.

Manual Hook Setup

First, activate the sample hook by copying it to the live hooks directory:

cp .git/hooks/pre-commit.sample .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

Next, edit .git/hooks/pre-commit and replace its contents with a script that executes your lint command. The repository defines the standard lint script at line 19 of packages/eslint-config-airbnb/package.json as "lint": "eslint .".

Insert this enforcement logic into your hook:

#!/bin/sh

# Run Airbnb-based ESLint before every commit

npm run lint
if [ $? -ne 0 ]; then
  echo "✖ Lint errors detected – aborting commit."
  exit 1
fi

This script runs npm run lint and aborts the commit with a non-zero exit status whenever ESLint reports errors.

Husky-Based Configuration

For team environments where hooks must persist across clones, use Husky to version-control your hook configuration rather than relying on the .git/hooks directory.

Install Husky and create the hook:

npm install --save-dev husky
npx husky install
npx husky add .husky/pre-commit "npm run lint"

Ensure your package.json includes the prepare script for automatic setup:

{
  "scripts": {
    "lint": "eslint .",
    "prepare": "husky install"
  }
}

Test the Enforcement

Verify your setup by attempting to commit code that violates Airbnb rules, such as using var instead of const:

// Intentional violation of Airbnb style guide
var badVariable = true;

When you execute git commit, the hook should display output similar to:

$ npm run lint

> my-project@1.0.0 lint
> eslint .

/src/index.js
  12:7  error  Unexpected var, use let or const instead  no-var

✖ 1 problem (1 error, 0 warnings)

The commit will immediately abort, preventing the style violation from entering your repository history.

Summary

• Install peer dependencies: Add eslint-config-airbnb and its required plugins as specified in packages/eslint-config-airbnb/package.json.
• Extend the config: Reference "airbnb" in your .eslintrc, following the template provided in linters/.eslintrc.
• Activate the hook: Copy .git/hooks/pre-commit.sample to .git/hooks/pre-commit and insert the npm run lint command to enforce checks.
• Block bad commits: The hook's exit code logic ensures commits containing linting errors are rejected immediately.
• Use Husky for teams: Replace manual .git/hooks editing with Husky to share hook configurations through version control.

Frequently Asked Questions

Do I need Husky to set up pre-commit hooks with Airbnb ESLint?

No, Husky is optional. You can manually copy .git/hooks/pre-commit.sample to .git/hooks/pre-commit and add the lint command directly for immediate local enforcement. However, Husky stores hooks within your project directory, making the configuration portable across team members and fresh repository clones.

What command does the pre-commit hook actually execute?

The hook runs npm run lint, which executes eslint . as defined at line 19 of packages/eslint-config-airbnb/package.json. This command lints all JavaScript files in your project against the rules specified in your .eslintrc extension of the Airbnb config.

Can I lint only specific files or directories in the pre-commit hook?

Yes, modify the lint script in your package.json or alter the command in the hook script. For example, use eslint src/ to lint only your source directory, or eslint --cache . for faster incremental linting. The hook will respect any ESLint CLI options you specify.

Why does the hook abort the commit when ESLint reports warnings?

By default, ESLint exits with code 0 for warnings and 1 for errors, so warnings alone should not abort the commit. If you want to block commits on warnings as well, add the --max-warnings=0 flag to your script: "lint": "eslint --max-warnings=0 .". This forces the hook to treat warnings as fatal errors.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}