ESLint with React gives `no-unused-vars` errors : <p>I've setup <code>eslint</code> &amp; <code>eslint-plugin-react</code>. </p>

<p>When I run ESLint, the linter returns <code>no-unused-vars</code> errors for each React component.</p>

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

<p>Example: </p>

<p><strong>app.js</strong></p>

<pre><code>import React, { Component } from 'react';
import Header from './header.js';

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

<p><strong>Linter Errors:</strong></p>

<pre><code>/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
</code></pre>

<p><strong>Here is my <code>.eslintrc.json</code> file:</strong></p>

<pre><code>{
    "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"
        ]
    }
}
</code></pre>
