title: How to catch undeclared variable in React with ESLint?
body: <p>I noticed the other day that ESLint lets me use undefined variables. Here's a simple example:</p>
  
  <pre><code>import React from 'react';
  
  export default class test extends React.Component {
      render(){
          var a = b;
          var b = 1;
          return &lt;h1&gt;{a}&lt;/h1&gt;
      }
  }
  </code></pre>
  
  <p>Visual Studio Code with ESLint plugin does not draw a red line under that first 'b'.
  When compiled with webpack, there are no eslint errors.
  When running in the browser, the console doesn't even log any errors.
  The only way I know something is wrong is nothing is being displayed on the screen.</p>
  
  <p>Weirdly enough, if i remove the 'var b = 1', ESLint will give me an error saying b is undefined.</p>
  
  <p>Here is my eslint config; nothing special</p>
  
  <pre><code>{
  "parser":"babel-eslint",
  "plugins":[
      "react"
  ],
  "rules":{ },
  "extends":["eslint:recommended", "plugin:react/recommended"]
  </code></pre>
  
  <p>}</p>
  
  <p>What is the problem here? And how can I configure ESLint to catch errors like this in the future?</p>
  
  <p>Thanks</p>