setup-pre-commit

Configure Husky pre-commit hooks with lint-staged and Prettier for JavaScript/TypeScript projects.

2|Updated Aug 8, 2024
One-click install
npx skills add https://github.com/walid-mos/mac-config --skill setup-pre-commit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: setup-pre-commit
Source: https://github.com/walid-mos/mac-config/tree/main/claude/.claude/skills/setup-pre-commit
Command: npx skills add https://github.com/walid-mos/mac-config --skill setup-pre-commit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the setup of pre-commit hooks to ensure code quality and consistency before each commit, reducing errors and manual checks.

Core Features & Use Cases

  • Automated Code Formatting: Integrates Prettier to automatically format staged code.
  • Linting & Type Checking: Sets up lint-staged to run linters and optional type checks on staged files.
  • Use Case: When starting a new project or onboarding a new developer, quickly set up robust pre-commit hooks to maintain code standards across the team.

Quick Start

Use the setup-pre-commit skill to add Husky, lint-staged, and Prettier to the current project.

Frequently Asked Questions about setup-pre-commit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up pre-commit hooks with Husky and lint-staged?

To set up pre-commit hooks with Husky and lint-staged, you need to install the packages, initialize Husky, and configure the pre-commit and lint-stagedrc files to run automated checks on staged files.

Can I use Husky pre-commit hooks with pnpm or bun?

Yes, Husky pre-commit hooks can be configured for JavaScript and TypeScript projects using npm, yarn, pnpm, or bun, allowing you to run Prettier formatting and lint-staged checks across different package managers.

What is the best way to automate code formatting before a commit?

Automating code formatting before a commit is best achieved by integrating Prettier with Husky and lint-staged, which automatically formats staged code and runs linters to enforce code quality standards before changes are committed.

Why use lint-staged instead of running Prettier directly in pre-commit hooks?

Using lint-staged instead of running Prettier directly ensures that linters and optional type checks only run on staged files, making pre-commit hooks significantly faster by avoiding full-project code quality checks.

Do I need to install Prettier separately to automate code formatting?

Yes, you must install Prettier alongside Husky and lint-staged to enable automated code formatting, as the pre-commit hook configuration relies on these specific dependencies to format staged files.