react-precommit-kit

🚀 Production-ready pre-commit hooks for React projects - Enforce code quality standards automatically before every commit.

Features

✅ ESLint - Automatic code linting with auto-fix
✅ Prettier - Consistent code formatting
✅ TypeScript - Type checking (optional)
✅ Console Detection - Find forgotten console.logs
✅ File Size Validation - Prevent large files
✅ Branch Naming - Enforce naming conventions
✅ Commit Message Format - Conventional commits
✅ Fully Configurable - Enable/disable any check
✅ React Optimized - Pre-configured for React projects

Quick Start

# Install the package
npm install --save-dev react-precommit-kit

# Set up the hooks
npx react-precommit-kit

# That's it! Try making a commit
git add .
git commit -m "feat: testing hooks"

Using the Short Alias

npx rpk          # Install hooks
npx rpk fix      # Fix common issues
npx rpk test     # Test hooks without committing
npx rpk help     # Show help

Configuration

After installation, customize the behavior by editing scripts/pre-commit-config.js:

module.exports = {
  checks: {
    eslint: {
      enabled: true, // Toggle ESLint
      autoFix: true, // Auto-fix issues
      blockCommit: true, // Block commit on errors
    },
    prettier: {
      enabled: true, // Toggle Prettier
      autoFix: true,
      blockCommit: true,
    },
    typescript: {
      enabled: false, // Enable for TypeScript projects
      strict: false,
      noEmit: true,
      blockCommit: true,
    },
    consoleLogs: {
      enabled: true, // Detect console.log statements
      blockCommit: false, // Warning only by default
    },
    fileSize: {
      enabled: true,
      blockCommit: true,
      limits: {
        images: '2mb', // Customize size limits
        '.js': '500kb',
        '.css': '250kb',
      },
    },
  },
};

What Gets Installed

your-project/
├── .husky/
│   └── pre-commit          # Git hook
├── scripts/
│   ├── pre-commit-config.js    # Your configuration
│   ├── check-console-logs.js
│   ├── check-file-size.js
│   └── run-tsc.js
├── .eslintrc.json          # ESLint config
├── .prettierrc.json        # Prettier config
├── .lintstagedrc.json      # Lint-staged config
└── tsconfig.json           # TypeScript config

Commands

| Command | Description | | ---------------- | ----------------------------- | | npx rpk | Install hooks (default) | | npx rpk fix | Fix common issues | | npx rpk test | Test hooks without committing | | npx rpk config | Show config file location | | npx rpk help | Show help |

Common Issues

"npm test" Error

npx rpk fix

Disable TypeScript for JavaScript Projects

In scripts/pre-commit-config.js:

typescript: {
  enabled: false;
}

Allow Console Logs in Development

consoleLogs: {
  blockCommit: false,  // Just warn, don't block
  allowedPatterns: [
    /console\.error/,  // Allow console.error
    /logger\./,        // Allow logger.log
  ]
}

Bypass Hooks (Emergency Only)

git commit --no-verify -m "emergency: bypass hooks"

Requirements

• Node.js >= 14.0.0
• Git repository
• npm or yarn

React-Specific Features

This package is optimized for React projects with:

• JSX/TSX support out of the box
• React Hooks linting rules
• Component file size limits
• React-friendly ESLint configuration

Contributing

Found a bug or want to contribute? Open an issue!

License

MIT © 2024

Made with ❤️ for the React community