Question

前几天我注意到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代码不会在第一个＆＃39; b＆＃39;下面画一条红线。使用webpack编译时，没有eslint错误。在浏览器中运行时，控制台甚至不会记录任何错误。我知道错误的唯一方法就是屏幕上没有显示任何内容。

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

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

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

}

这是什么问题？我如何配置ESLint以便在将来捕获这样的错误？

由于

Answer 1

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

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

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

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

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

1 个答案: