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

npx react-easy-setup

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.

Features

    ✓ Language - ES6+
    ✓ Styling(CSS/Tailwindv4) - Tailwind
    ✓ React Router v7 - React Router
    ✓ Eslint - Eslint
    ✓ Husky - Husky

Application Structure

├── dist/
├── src/
│   ├── assets/
│   ├── components/
│   ├── page/
│   ├── router/
│   └── index.html
│   └── index.css
└──package.json

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 react-easy-setup

Manual setup

git clone https://github.com/akashpradhan-dev/react-quick-start.git

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