What eslint config do you use with react

#discuss #react

I used to use eslint-plugin-react but found more and more nonsense rules in there like https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md. I only want to see an error when there's an actual bug or bad practice (like unused variables, same variable name in upper scope, forgot to close a bracket etc). No styling stuff (I have prettier for that)

Top comments (1)

Gonzalo Pozzo • Dec 11 '19 • Edited

{
  "root": true,
  "extends": [
    "react-app",
    "plugin:prettier/recommended",
    "plugin:cypress/recommended",
    "prettier/react"
  ],
  "plugins": ["cypress", "react-hooks"],
  "env": {
    "cypress/globals": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "ignoreRestSiblings": false,
        "argsIgnorePattern": "^_$"
      }
    ],
    "prettier/prettier": [
      "warn",
      {
        "semi": true,
        "trailingComma": "es5",
        "printWidth": 120
      }
    ],
    "import/order": ["warn", {"newlines-between": "always"}],
    "react/self-closing-comp": "warn",
    "react-hooks/rules-of-hooks": "warn",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-sort-props": ["warn", {
      "callbacksLast": true,
      "shorthandFirst": true,
      "noSortAlphabetically": false,
      "reservedFirst": true
    }]
  }
}

This is mine, this is most styling stuff (sorry), but can also catch bugs early on

DEV Community

What eslint config do you use with react

Top comments (1)

Read next

Google Analytics (GA4) implementation with React - Remix example

Why Set.has() is Faster Than Array.includes() for Finding Items

Meme Monday

How do you take the first steps in a daunting and complicated software project?