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

Let's create Data Table with React, TanStack Table and Tailwind CSS. Part 1: Intro and HTML layout

Meme Monday

TanStack Query v5 Guide: Features, Benefits, and How It's Used

Building Your Own Blog with Next.js and Node.js