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

I've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React component.

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?

Example:

app.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
      	{this.props.children}
      </div>
    );
  }
}

Linter Errors:

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

Here is my .eslintrc.json file:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

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

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" 
}

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.

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$"
		}
	],

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

Add this to your ESLint config:

{
	"extends": [
		"plugin:react/recommended"
	]
}

---

If you use XO, refer to eslint-config-xo-react.

I have the same error as well as I started to learn React yesterday. The terminal show the error and it is pretty straightforward to ignore the unused variable error.

Error from the terminal:

Line 5:17:  'setBlog' is assigned a value but never used  no-unused-vars
Search for the keywords to learn more about each warning.

Just add // eslint-disable-next-line this line before the variable which you have the error of unused variable. Like,

// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)

in eslintrc.js adding following will solve the error

  plugins: [
    'react/recommended',
  ],

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

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

In Package.json replace eslintConfig declaration

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugin":"react/recommended",
    "rules": {
      "react/jsx-uses-react": "error",   
       "react/jsx-uses-vars": "error" 
    }
  },

If you create the project throught create-react-app CLI,You can npm run eject,and edit the package.json "eslintConfig" field,like this:

`"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "eqeqeq": "off",
      "no-unused-vars": "off",
    }
  },`

the eslint will be closed

if you are using Create-react-app, there is no need to install anything or Eject, the simple solution is:

since the no-unused-vars-errors is thrown from webpackHotDevClient.js, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js. on "new ESLintPlugin" rules just add :

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

According to Official Docs of Eslint have you tried this

/* eslint no-unused-vars : "off" */

add this line as it is inside anywhere in your code. Hopefully you warning may go away and it may help you