ESLint React configuration (combined with Prettier + WebStorm)

.eslintrc.js

module.exports = {
  extends: [
    "react-app",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
    "prettier/react",
  ],
  plugins: [
      "simple-import-sort"
  ],
  rules: {
    "require-await": "error",
    "no-var": "error",
    "@typescript-eslint/no-non-null-assertion": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/ban-ts-ignore": "error",
    "simple-import-sort/sort": "error",
    "@typescript-eslint/no-unused-vars": ["error", {"args": "none"}],
    "@typescript-eslint/explicit-function-return-type": "off",
    "react-hooks/exhaustive-deps": "off",
    "@typescript-eslint/no-empty-interface": "off",
  }
};

To be combined with a strict TypeScript config https://gist.github.com/fkirc/8fd2a4cb0289a0a0fd03381318eb2ed0.

WebStorm - ESLint:

• Automatic ESLint configuration
• Run eslint --fix on save

package.json:

  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "npx eslint --ignore-path=.gitignore --fix"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npx lint-staged"
    }
  },