Explian how am i set up Eslint and Prettier

.eslintrc.json

{
    "extends": [
        "next/core-web-vitals",  // Just for nextjs
        "airbnb",
        "airbnb-typescript",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "project": "./tsconfig.json"   //Typescript support
    },
    // Don't do this untill you are ensure what you want 
    "rules": {
        "@typescript-eslint/no-unused-vars": "warn",
        "no-console": "off",
        "no-unused-vars": "warn",
        "react/react-in-jsx-scope": "off"
    }
}

.prettierrc.json

// You don't really need add this file untill you want change some default settings
// if some error happens, remove this file and try again, maybe delete the extension recreate this file 
{
    "trailingComma": "es5",
    "semi": false,
    "tabWidth": 4,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "plugins": ["prettier-plugin-tailwindcss"]
}

package.json

{
    "name": "example",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@types/node": "18.16.3",
        "@types/react": "18.2.0",
        "@types/react-dom": "18.2.1",
        "autoprefixer": "10.4.14",
        "eslint-config-next": "13.3.1",
        "next": "13.3.1",
        "postcss": "8.4.23",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "tailwindcss": "3.3.2"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^5.13.0",
        "@typescript-eslint/parser": "^5.0.0",
        "eslint": "^8.2.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.28.0",
        "eslint-plugin-react-hooks": "^4.3.0",
        "prettier": "^2.8.8",
        "prettier-plugin-tailwindcss": "^0.2.8",
        "typescript": "^5.0.4"
    }
}

SetUpEslintNPrettier.md

1. install prettier and eslint, check out the documentation to find out what is need to configuaition
   search for:
   
2. eslint-plugin-prettier —————— runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
   
3. eslint-config-prettier —————— This thing just make eslint and prettier work together, fixed the confliction
   
4. prettier-plugin-tailwindcss ——————It will handy if you are using Tailwind
   
5. eslint-config-airbnb
   
6. eslint-config-airbnb-typescript ——————Again, just for Typescript
   

## Add options to .prettier.* file, and add rules to eslintrc.json file ## Remeber, after you add some optoins to .prettier.* file, restart the project ## Extensions will be upgrade or dead, It's not a big deal 😘 ##