reactjs - 如何使用 ESLint 捕获 React 中未声明的变量？

Question

有一天我注意到 ESLint 允许我使用 undefined variable 。这是一个简单的例子:

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 来捕获将来类似的错误？

谢谢

Answer 1

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

This rule will warn when it encounters a reference to an identifier that has not yet been declared.

您正在使用推荐的配置 - 其中未启用该规则。要使用它，您需要显式启用它:

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