$ yarn add --dev eslint prettier

$ yarn add --dev eslint-cli

$ yarn run eslint --init
yarn run v1.22.19
$ /Users/xxx/workspace/yyy/zzz/node_modules/.bin/eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.5
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
...

diff --git a/package.json b/package.json
index 5abcf3a8..31ad26aa 100644
--- a/package.json
+++ b/package.json
@@ -3,26 +3,43 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build && vite build --ssr"
+        "serve": "vite preview",
+        "build": "vite build && vite build --ssr",
+        "lint": "eslint resources/js --ext .js,.jsx,.ts,.tsx",
+        "lint:fix": "eslint resources/js --ext .js,.jsx,.ts,.tsx --fix",
+        "format": "prettier --write resources/js"
     },
     "devDependencies": {
-        "@headlessui/react": "^1.4.2",
-        "@inertiajs/react": "^1.0.0",
         "@tailwindcss/forms": "^0.5.3",
-        "@vitejs/plugin-react": "^3.0.0",
         "autoprefixer": "^10.4.12",
-        "axios": "^1.1.2",
-        "laravel-vite-plugin": "^0.7.5",
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "postcss": "^8.4.18",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "prettier": "^2.8.8",
         "tailwindcss": "^3.2.1",
-        "vite": "^4.0.0"
+        "vite-plugin-eslint": "^1.8.1"
     },
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@headlessui/react": "^1.7.15",
+        "@inertiajs/react": "^1.0.9",
+        "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.13.6",
-        "mui-image": "^1.0.7"
+        "@vitejs/plugin-react": "^4.0.1",
+        "axios": "^1.4.0",
+        "laravel-vite-plugin": "^0.7.8",
+        "mui-image": "^1.0.7",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "vite": "^4.3.9"
     }
}

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    extends: [
        'airbnb',
        'eslint:recommended',
        'plugin:prettier/recommended',
        'plugin:react/recommended'
    ],
    settings: {
        react: {
            version: 'detect'
        },
        'import/resolver': {
            node: {
                path: ['node_modules', 'resources/js'],
                extensions: ['.js', '.jsx', '.ts', '.tsx']
            }
        }
    },
    overrides: [
        {
            env: {
                node: true
            },
            files: ['.eslintrc.{js,cjs}'],
            parserOptions: {
                sourceType: 'script'
            }
        }
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    plugins: ['react', 'import', 'prettier'],
    rules: {
        'no-unused-vars': 'warn',
        'import/extensions': 'off',
        'import/no-unresolved': 'warn',
        'import/no-extraneous-dependencies': 'warn',
        'react/jsx-props-no-spreading': 'warn',
        'react/prop-types': 'warn',
        'react/require-default-props': 'warn'
    }
};

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none"
}

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true
        }),
        react(),
+       eslint({
+           include: ['/resources/js/**/*.jsx', '/public/assets/*'],
+           exclude: ['node_modules/**']
+       })
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            '@assets': '/public/assets'
        },
+       extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
});