在 ReactJS 箭头函数 class 属性上防止 ESLint "no-undef"

Question

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

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

它们确实起作用，代码也起作用运行。除了 ESLint 仍然认为它们是错误的。

我知道这个问题已经被问过好几次了（比如），但我已经被困了好几天了，none 的答案似乎很有帮助。

我的 .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", 2],
    "max-len": [2, 300],
    "semi": [2, "never"],
    "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

Answer 1

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

在 ReactJS 箭头函数 class 属性上防止 ESLint "no-undef"

Preventing ESLint "no-undef" on ReactJS arrow-function class properties

javascript

reactjs

babeljs

eslint

babel-eslint