如何使用 ESLint 在 React 中捕获未声明的变量？答案

【问题标题】：How to catch undeclared variable in React with ESLint?如何使用 ESLint 在 React 中捕获未声明的变量？
【发布时间】：2017-12-17 18:50:42
【问题描述】：

前几天我注意到 ESLint 允许我使用未定义的变量。这是一个简单的例子：

import React from 'react';

export default class test extends React.Component {
    render(){
        var a = b;
        var b = 1;
        return <h1>{a}</h1>
    }
}

带有 ESLint 插件的 Visual Studio Code 不会在第一个“b”下绘制红线。使用 webpack 编译时，没有 eslint 错误。在浏览器中运行时，控制台甚至不会记录任何错误。我知道出了什么问题的唯一方法是屏幕上没有显示任何内容。

奇怪的是，如果我删除 'var b = 1'，ESLint 会给我一个错误，说 b 未定义。

这是我的 eslint 配置；没什么特别的

{
"parser":"babel-eslint",
"plugins":[
    "react"
],
"rules":{ },
"extends":["eslint:recommended", "plugin:react/recommended"]

}

这里有什么问题？以及如何配置 ESLint 以在将来捕获此类错误？

谢谢

【问题讨论】：

标签： reactjs webpack undefined eslint

【解决方案1】：

您要查找的规则是no-use-before-define:

此规则在遇到对尚未声明的标识符的引用时会发出警告。

您正在使用推荐的配置 - 未启用该规则。要使用它，您需要明确启用它：

{
  "parser":"babel-eslint",
  "plugins":[
    "react"
  ],
  "rules":{
    "no-use-before-define": "error"
  },
  "extends":["eslint:recommended", "plugin:react/recommended"]
}

【讨论】：

谢谢。是否有任何理由不在推荐的规则集中？在哪种情况下我可能不想要它？
我想不出你不想知道在声明之前使用的变量的情况。我猜推荐的规则集最好被认为是最小的规则集；有很多规则不在其中，我建议您使用。
实际上，如果变量在声明之前的第一次使用是对所述变量的赋值，那么错误将是虚假的。