在 ReactJS 箭头函数类属性上防止 ESLint “no-undef”

问题描述

我正在尝试让 @babel/plugin-proposal-class-properties 与 @babel/eslint-parser 和 ESLint 一起工作。我有很多这样写的类方法：

class MyClass extends PureComponent {
  ...
  someProperty = () => { ... } // < ESLint: 'someProperty' is not defined.(no-undef)
  ...
}

它们确实可以工作，并且代码确实可以运行。除了 ESLint 仍然认为它们是错误的。

我知道这个问题已经被问过好几次（例如 here），但我已经被困了好几天，似乎没有一个答案有帮助。

我的 .eslintrc 文件：

{
  "extends": [
    "eslint:recommended","plugin:react/recommended","airbnb"
  ],"parser": "@babel/eslint-parser",// < I do use the babel parser
  "parserOptions":{
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    },"babelOptions": {
      "plugins": [
        "@babel/plugin-proposal-class-properties" // < tried putting my plugin here
      ]
    }
  },"plugins": [
    "react","jsx-a11y","import",// "@babel" < "ESLint: Error: Failed to load plugin @babel: Cannot find module 'eslint-plugin-@babel'"
  ],"rules": {
    "react/jsx-filename-extension": 0,"no-plusplus": 0,"comma-dangle": [2,"never"],"indent": ["error",2,{ "SwitchCase": 1 }],"react/jsx-indent": ["error",2],"react/jsx-indent-props": ["error","max-len": [2,300],"semi": [2,"no-underscore-dangle": 0,"no-script-url": 0,"no-extend-native": ["error",{ "exceptions": ["String"] }],"no-restricted-Syntax": ["error","ForOfStatement","LabeledStatement","WithStatement"],"import/no-unresolved": [2,{ "ignore" : [ "electron" ] }]
  }
}

我的 babel.config.json 文件：

{
  "presets": [["@babel/preset-env",{ "modules": false }],"@babel/preset-react"],"plugins": [
    "babel-plugin-add-module-exports","babel-plugin-async-to-promises","babel-plugin-Syntax-async-functions","@babel/plugin-proposal-function-bind","@babel/plugin-transform-modules-commonjs","@babel/plugin-proposal-class-properties"
  ],"env": {
    "production": {
      "presets": ["react-optimize"],"plugins": [
        "babel-plugin-transform-remove-console","babel-plugin-transform-remove-debugger","babel-plugin-dev-expression"
      ]
    },"dev": {
      "presets": []
    },"test": {
      "plugins": [
        ["webpack-loaders",{ "config": "webpack.config.node.js","verbose": false }]
      ]
    }
  }
}

软件包版本：

@babel/core: 7.12.10
@babel/eslint-parser: 7.12.1
@babel/eslint-plugin: 7.12.1
@babel/plugin-proposal-class-properties: 7.12.1
eslint: ^3.19.0

解决方法

如果有人遇到这个问题，我最终将 eslint 更新到了最新版本（当时是 7.18.0），我的问题就消失了。