# How to Configure Pre-Commit Hooks with lint-staged Using the setup-pre-commit Skill

> Learn to configure pre-commit hooks with lint-staged using the setup-pre-commit skill. Automate code formatting and validation before every commit for cleaner code.

- Repository: [Matt Pocock/skills](https://github.com/mattpocock/skills)
- Tags: how-to-guide
- Published: 2026-04-04

---

**The **setup-pre-commit** skill automates the configuration of pre-commit hooks by integrating **Husky**, **lint-staged**, and **Prettier** to format staged files and run validations before every commit.**

The mattpocock/skills repository provides a declarative automation that eliminates manual boilerplate when you configure pre-commit hooks with lint-staged using setup-pre-commit in JavaScript and TypeScript projects. According to the source specification in [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md), the skill detects your package manager, installs the required dependencies, and generates executable Git hooks that enforce code quality standards automatically.

## How the Skill Automates the Pipeline

### Husky for Git Hook Management

The skill executes `npx husky init` to scaffold the `.husky/` directory and automatically adds a `prepare` script to [`package.json`](https://github.com/mattpocock/skills/blob/main/package.json). According to lines 31-38 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md), this initialization ensures Git hooks are automatically installed when developers clone the repository and run `npm install`.

### lint-staged for Fast Staged-File Execution

The skill generates a `.lintstagedrc` file that configures lint-staged to run `prettier --ignore-unknown --write` exclusively on staged files via the `"*"` glob pattern. This targeted approach, defined in lines 49-55 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md), ensures the pre-commit hook executes in seconds rather than reformatting the entire codebase.

### Prettier for Code Style Enforcement

When no existing Prettier configuration is detected, the skill creates a `.prettierrc` file with sensible defaults including `tabWidth: 2`, `printWidth: 80`, and `semi: true`. These settings are specified in lines 57-70 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md) and ensure consistent formatting across the team.

## Package Manager Detection and Dependencies

Before installing dependencies, the skill inspects lock files to determine the correct package manager: [`package-lock.json`](https://github.com/mattpocock/skills/blob/main/package-lock.json) for npm, [`pnpm-lock.yaml`](https://github.com/mattpocock/skills/blob/main/pnpm-lock.yaml) for pnpm, `yarn.lock` for Yarn, or `bun.lockb` for Bun, falling back to npm if none are present (lines 17-20 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md)). The skill then installs `husky`, `lint-staged`, and `prettier` as devDependencies using the detected tool and generates hook scripts using the appropriate run commands (e.g., `pnpm run` instead of `npm run`).

## Generated Configuration Files

### The Pre-Commit Hook Script

The skill creates an executable `.husky/pre-commit` file that orchestrates the validation pipeline:

```bash
npx lint-staged
npm run typecheck   # omitted automatically if script missing

npm run test        # omitted automatically if script missing

```

As defined in lines 37-45 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md), the skill intelligently omits the type-checking and testing lines if those scripts do not exist in [`package.json`](https://github.com/mattpocock/skills/blob/main/package.json), preventing commit failures.

### The Lint-Staged Configuration

The `.lintstagedrc` file maps all staged files to the Prettier command:

```json
{
  "*": "prettier --ignore-unknown --write"
}

```

### Default Prettier Options

If no Prettier configuration exists, the skill writes `.prettierrc` with these optimized defaults:

```json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}

```

## Verifying the Installation

After the skill completes, verify the setup by confirming that `.husky/pre-commit` exists and is executable, the `prepare` script in [`package.json`](https://github.com/mattpocock/skills/blob/main/package.json) contains `"husky"`, and both `.lintstagedrc` and `.prettierrc` are present in your repository root. You can test hook executability by running `test -x .husky/pre-commit && echo "Hook is executable"` in your terminal.

## Summary

- The **setup-pre-commit** skill automates the complete workflow to configure pre-commit hooks with lint-staged using setup-pre-commit as specified in [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md).
- It supports **npm**, **pnpm**, **Yarn**, and **Bun** by detecting their respective lock files and adapting commands accordingly.
- The generated `.husky/pre-commit` hook runs `lint-staged` first for formatting, then optionally executes `typecheck` and `test` scripts only if they exist in [`package.json`](https://github.com/mattpocock/skills/blob/main/package.json).
- Configuration files `.lintstagedrc` and `.prettierrc` are scaffolded automatically with optimized defaults that enforce consistent code style.

## Frequently Asked Questions

### Which package managers does setup-pre-commit support?

The skill automatically detects **npm**, **pnpm**, **Yarn**, and **Bun** by scanning for their respective lock files ([`package-lock.json`](https://github.com/mattpocock/skills/blob/main/package-lock.json), [`pnpm-lock.yaml`](https://github.com/mattpocock/skills/blob/main/pnpm-lock.yaml), `yarn.lock`, `bun.lockb`), defaulting to npm if no lock file is present, as implemented in lines 17-20 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md).

### What happens if my project lacks typecheck or test scripts?

The skill intelligently omits calls to these scripts from the generated `.husky/pre-commit` hook if they are not defined in [`package.json`](https://github.com/mattpocock/skills/blob/main/package.json), ensuring the commit proceeds after linting and formatting without throwing "missing script" errors (lines 37-45 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md)).

### How does the skill configure Prettier?

If no existing Prettier configuration is found, the skill creates a `.prettierrc` file with sensible defaults including 2-space indentation, 80-character print width, and semicolons enabled, as defined in lines 57-70 of [`setup-pre-commit/SKILL.md`](https://github.com/mattpocock/skills/blob/main/setup-pre-commit/SKILL.md).

### Why does the hook use lint-staged instead of running Prettier directly?

lint-staged executes Prettier only on files staged for commit via the `"*"` glob pattern in `.lintstagedrc`, which keeps the hook execution fast and avoids unnecessary reformatting of unchanged files in large repositories.