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

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
• Git: Download Git

Quick Start (Automatic Setup via npx)

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

npx create-react-husky

Manual setup

• With JavaScript

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

• With Typescript

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

Commands

• Automatically fixes ESLint issues in your code

npm run lint:fix

• Check lint issues

npm run lint

• Automatically fixes Prettier formatting issues in your code.

npm run format:fix

• Check format

npm run format

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

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
    },