My airbnb based ESLint config for "typescript-eslint" with React & prettier

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },
  "env": {
    "browser": true,
    "jest/globals": true
  },
  "plugins": ["@typescript-eslint", "react-hooks", "jest", "prettier"],
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"

  ],
  "rules": {
    /**
     * @description rules of eslint official
     */
    /**
     * @bug https://github.com/benmosher/eslint-plugin-import/issues/1282
     * "import/named" temporary disable.
     */
    "import/named": "off",
    /**
     * @bug?
     * "import/export" temporary disable.
     */
    "import/export": "off",
    "import/prefer-default-export": "off", // Allow single Named-export
    "no-unused-expressions": ["warn", {
      "allowShortCircuit": true,
      "allowTernary": true
    }], // https://eslint.org/docs/rules/no-unused-expressions

    /**
     * @description rules of @typescript-eslint
     */
    "@typescript-eslint/prefer-interface": "off", // also want to use "type"
    "@typescript-eslint/explicit-function-return-type": "off", // annoying to force return type

    /**
     * @description rules of eslint-plugin-react
     */
    "react/jsx-filename-extension": ["warn", {
      "extensions": [".jsx", ".tsx"]
    }], // also want to use with ".tsx"
    "react/prop-types": "off", // Is this incompatible with TS props type?

    /**
     * @description rules of eslint-plugin-react-hooks
     */
    "react-hooks/rules-of-hooks": "error",

    /**
     * @description rules of eslint-plugin-prettier
     */
    "prettier/prettier": [
      "error", {
        "singleQuote": true,
        "semi": false
      }
    ]
  }
}

Install necessary dependencies 🐈

yarn add -D eslint prettier @typescript-eslint/{eslint-plugin,parser} eslint-config-{airbnb,prettier} eslint-plugin-{import,jest,jsx-a11y,prettier,react,react-hooks}

if u r using VSCode, also install the ESLint extension.

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Then add settings to your VSCode settings.json .

 "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ]

Add the lint command to the package.json of the project 📝

"scripts": {
  "lint": "eslint src/** --ext .ts,.tsx",
  "lint:fix": "yarn lint --fix"
}

---

🎉 ✨ 🙌 😭 🙌 : ✨ 🎉

Hi. Thanks for your work.

Can you please tell me why haven't you removed "Missing accessibility modifier on class property mapSignals.eslint(@typescript-eslint/explicit-member-accessibility)" this rule?

And I must delete this to make it work in VS code? "project": "./tsconfig.json", - O don't know why, but this string brokes linter

 "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },

I have to change it to

  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },

And it works

thank you

Thanks for sharing!

WRT react/prop-types, they recommend that you use both TS types and prop-types: jsx-eslint/eslint-plugin-react#2275

I am trying to use a react like custom library. How can make changes for that?

remove eslint-plugin-{react,react-hooks} and related react rules.