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

Question

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

Answer 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

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