title: react.js 'x' is assigned a value but never used no-unused-vars
body: <p>I've setup eslint &amp; eslint-plugin-react.</p>
  
  <p>When I run ESLint, the linter returns no-unused-vars .</p>
  
  <p>I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?</p>
  
  <p>Line 5:11:  'x' is assigned a value but never used  no-unused-vars</p>
  
  <p>Example: </p>
  
  <p>Please help me</p>
  
  <hr>
  
  <p>Inside a file Component </p>
  
  <pre><code>import React,{ Component } from 'react';
  class Item extends Component{
     render () {
         const x = 1;
         return (
           &lt;div&gt;test&lt;/div&gt;
         );
      }
  };
  
  export default Item;
  </code></pre>
  
  <hr>
  
  <p>Inside a file .eslintrc.json</p>
  
  <pre><code>{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "react-app","prettier"
  ],
  "settings": {
    "react": {
      "createClass": "createReactClass"
      "pragma": "React",
      "version": "detect",
      "flowVersion": "0.53"
    },
    "propWrapperFunctions": [
        "forbidExtraProps",
        {"property": "freeze", "object": "Object"},
        {"property": "myFavoriteWrapper"}
    ],
    "linkComponents": [
      "Hyperlink",
      {"name": "Link", "linkAttribute": "to"}
    ]
  },
  "parserOptions": {
      "ecmaVersion": 2018,
      "ecmaFeatures": {
        "jsx": true
      }
  },
  "plugins": [
      "react","prettier"
  ],
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
  }
  </code></pre>
  
  <p>}</p>