ESLint with React gives `no-unused-vars` errors

Solution 1:

First, install the following module npm install --save-dev eslint-plugin-react.

Then, in your .eslintrc.json, under extends, include the following plugin:

'extends': [
    'plugin:react/recommended'
]

Source

Solution 2:

To solve this only problem without adding new rules from react/recommended install eslint-plugin-react:

npm install eslint-plugin-react --save-dev

add in .eslintrc.js:

"plugins": ["react"]

and:

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars": "error" 
}

Solution 3:

Since I found this while googling, you should know that this simple rule is enough to prevent this message:

react/jsx-uses-react

The react/recommended set of rules adds many other rules you may not want.

Solution 4:

In my case I needed to add in your .eslintrc.js:

'extends': [
    'plugin:react/recommended'
]

plus a specific tweaking to rid of preact import: import { h } from 'preact' but you can use this example to get rid of your specific warnings like so:

    "no-unused-vars": [
        "error",
        {
            "varsIgnorePattern": "^h$"
        }
    ],

Solution 5:

Quickest fix

To ignore all TitleCase variables, add this to your ESLint config:

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "^[A-Z]"
            }
        ]
    ]
}

Correct fix

Use eslint-plugin-react to ignore React variables.

npm install eslint-plugin-react -D

Add this to your ESLint config:

{
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": "error",
        "react/jsx-uses-react": "error"
    }
}

Suggested fix

Use eslint-plugin-react to improve your JSX usage, not just to silence this error.

npm install eslint-plugin-react -D