Configure eslint with Airbnb rules extension and Prettier in React apps

PHOTO EMBED

Sun Jul 10 2022 08:19:18 GMT+0000 (Coordinated Universal Time)

Saved by @jadorkor #javascript #nodejs #react.js

$npm install --save-dev eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-native ...

// AUTOMATIC CONFIG FILE
$npm init @eslint/config

//GLOBAL INSTALLATION AND USE
$npm i -g eslint
$eslint --init

// PACKAGE.JSON
{ //...,
  
  "devDependencies": {
    "@babel/eslint-parser": "^7.18.9",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@typescript-eslint/parser": "^5.32.0",
    "eslint": "^8.21.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0"
  },
   //...
}

// TSCONFIG.JSON
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*"
  ]
}


// .ESLINTRC
{
  "globals": {
    "module": true
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "react/react-in-jsx-scope": 0,
    "quotes": [
      "error",
      "double"
    ],
    "import/extensions": 0,
    "import/no-unresolved": 0,
    "linebreak-style": [
      "error",
      "windows"
    ],
    "operator-linebreak": "off",
    "react/jsx-filename-extension": 0,
    "no-shadow": "off",
    "jsx-a11y/label-has-associated-control": 0,
    "react/jsx-no-bind": 0,
    "no-unused-expressions": [
      "warn",
      {
        "allowShortCircuit": true,
        "allowTernary": true
      }
    ]
  }
}

// .PRETTIERRC
{
  "trailingComma": "all",
  "importOrder": [
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "next-seo.config",
    "^components/(.*)$",
    "^utils/(.*)$",
    "^assets/(.*)$",
    "^@fontsource/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
content_copyCOPY

https://eslint.org/docs/latest/user-guide/getting-started