Setup Pre-Commit - One-Click Configuration of Husky Pre-Commit Hooks

Skill Overview

Setup Pre-Commit automatically configures a Husky pre-commit hook for the current repository, integrating lint-staged and Prettier to format staged files, while running type checks and tests before each commit.

Use Cases

1. Unifying code style across team collaboration: When multiple people are developing, each person may have different editor and formatting preferences. A pre-commit hook can automatically run Prettier at commit time, processing only the staged files from the current change. There is no need to format the entire codebase, and “formatting commits” will not clutter the commit history.

2. Adding pre-commit checks to legacy projects: If the repository does not yet have any Git hooks, you can add three checkpoints—formatting, type checking, and testing—before commits in one step, preventing obviously problematic code from entering the main branch.

3. Preventing type errors from being committed in TypeScript projects: Attach the typecheck and test scripts to the hook so they run automatically before committing. This catches failures much earlier than waiting for CI.

Core Features

1. Husky initialization and hook creation: Runs npx husky init to create the .husky/ directory and add the prepare: "husky" script, then generates the .husky/pre-commit file. Hook files in Husky v9 and later do not require a shebang.

2. lint-staged + Prettier formatting for staged files: Generates a .lintstagedrc configuration with "*": "prettier --ignore-unknown --write", running Prettier only on files staged in the current change. --ignore-unknown skips files that Prettier cannot parse, such as images, preventing errors from interrupting the commit. If the repository lacks a Prettier configuration, a default .prettierrc is added with 2-space indentation, an 80-column width, double quotes, ES5 trailing commas, and semicolons. Existing configurations are left unchanged.

3. Automatic package manager detection and command adaptation: Checks for package-lock.json, pnpm-lock.yaml, yarn.lock, and bun.lockb to determine whether the project uses npm, pnpm, yarn, or bun. Commands in the hook are replaced with those for the detected package manager. If package.json does not contain a typecheck or test script, the corresponding line is omitted and you are explicitly informed, rather than having it written into the hook only to fail later.

Frequently Asked Questions

Will the pre-commit hook slow down every commit?

lint-staged runs Prettier only on staged files, so it is usually very fast. The time-consuming steps are the subsequent full-project typecheck and test commands. The skill places lint-staged first so formatting and type-checking errors are exposed as early as possible, but commits may take noticeably longer when the project has a large test suite. In that case, you can keep only the formatting step and leave testing to CI.

What if the project has no typecheck or test script?

The skill checks package.json. If either script is missing, its corresponding line is omitted directly from .husky/pre-commit, and you are informed which script is missing. The hook will not fail because it references a nonexistent script. If needed, add the script first and then run the setup again.

Are pnpm, yarn, and bun supported? Will an existing Prettier configuration be overwritten?

Yes. The skill automatically detects npm, pnpm, yarn, or bun through the lockfile. If no lockfile is found, npm is used by default, and the commands in the hook are updated accordingly. A .prettierrc file is created only when the repository has no Prettier configuration at all; existing configurations are not overwritten. Note that .lintstagedrc and .husky/pre-commit are written directly by the skill, so take care if files with the same names already exist in the repository.

How can I confirm that everything works after setup?

Follow the verification checklist in the skill: confirm that .husky/pre-commit exists and has executable permissions, .lintstagedrc exists, package.json contains "prepare": "husky", and a Prettier configuration exists. Then manually run npx lint-staged. Finally, the skill commits the changes; that commit itself triggers the new hook, serving as a real smoke test. To temporarily skip checks during normal development, use git commit --no-verify.