# React Project Setup with Husky, ESLint, Prettier, and Lint-staged

```bash
npx create-react-husky
```

This is a custom React(vite) project setup that integrates **Husky** for Git hooks, **ESLint** for code linting, **Prettier** for code formatting, and **Lint-staged** for efficient linting and formatting on staged files only. This setup ensures high code quality and prevents poor-quality code from being committed to your repository.

## Features

- **React Project Setup**: Quickly set up a React(Vite) project with either JavaScript or TypeScript.
- **Husky**: Automatically runs Git hooks (e.g., `pre-commit`) to ensure code quality before committing.
- **ESLint**: Enforces coding standards and catches potential errors in your JavaScript or TypeScript code.
- **Prettier**: Formats the code automatically to maintain consistent style.
- **Lint-staged**: Only runs linting and formatting on staged files to optimize your workflow.
- **Pre-commit Hook**: Automatically runs linting and formatting tasks before committing code.

## Prerequisites

Ensure you have the following tools installed on your system:

- **Node.js**: [Download Node.js](https://nodejs.org/)
- **Git**: [Download Git](https://git-scm.com/)

## Quick Start (Automatic Setup via `npx`)

To set up the project automatically with all necessary configurations, run the following command:

```bash
npx create-react-husky
```

### Manual setup

- **With JavaScript**

```base
git clone https://github.com/akashpradhan-dev/react-husky-js
```

- **With Typescript**

```base
git clone https://github.com/akashpradhan-dev/react-husky-ts
```

## Commands

- Automatically fixes ESLint issues in your code

```bash
npm run lint:fix
```

- Check lint issues

```bash
npm run lint
```

- Automatically fixes Prettier formatting issues in your code.

```bash
npm run format:fix
```

- Check format

```bash
npm run format
```

## Change configuration ESLint: add or disable rule in eslint.config.js file in the root of your project:

```bash
rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/prop-types': 'off',
      'react/no-unknown-property': 'off',
      //Add new rule here
    },
```