react-precommit-kit/README.md

Production-ready pre-commit hooks for React projects with ESLint, Prettier, TypeScript, and custom validations

# react-precommit-kit

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

[![npm version](https://img.shields.io/npm/v/react-precommit-kit.svg)](https://www.npmjs.com/package/react-precommit-kit)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 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

```bash
# 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

```bash
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`:

```javascript
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

```bash
npx rpk fix
```

### Disable TypeScript for JavaScript Projects

In `scripts/pre-commit-config.js`:

```javascript
typescript: {
  enabled: false;
}
```

### Allow Console Logs in Development

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

## Bypass Hooks (Emergency Only)

```bash
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](https://github.com/yourusername/react-precommit-kit/issues)!

## License

MIT © 2024

---

Made with ❤️ for the React community