CODEWITHSUNDEEP
reactjsreact-hookseslint
Red Baron
Red Baron

Reputation: 7642

react-hooks/exhaustive-deps not showing in VS code

I have a .eslintrc file with the following rules:

"rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "no-console": "warn"
},

I've installed: eslint-plugin-prettier, eslint-config-prettier and eslint-plugin-react-hooks

I've enabled "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], in settings.json in vscode

but when I remove dependencies that are needed in a useEffect, it's not showing an error that I hoped it would

what else do I need to do?

Upvotes: 7

Views: 7793

Answers (3)

Erba Afidotama
Erba Afidotama

Reputation: 81

I use react 18.2.0 , react-scripts 5.0.1 and react-app-rewired 2.2.1. You must to add some code in .eslintrc.

{
  "plugins": [
    // ...
    "react-hooks" // for activate eslint checking react hooks
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  }
}

Upvotes: 8

Red Baron
Red Baron

Reputation: 7642

This worked for me only when I updated react-scripts to 4.x.x

It also helps to restart the ESLint server in VScode after doing this

hgb123 answer also is useful if you haven't already done that

Upvotes: 0

hgb123
hgb123

Reputation: 14891

In .eslintrc, along with to adding rules, you must add react-hooks in the list of plugins

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error"
  }
}

Upvotes: 2

Related Questions