为什么 ESLint 无法识别我的 class 箭头函数？

Question

我听从了 which states to set the parser to babel-eslint 的建议。

我安装了它并更新了我的配置文件如下：

{
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "eqeqeq": ["error", "always"],
    "max-depth": ["error", 5],
    "space-before-function-paren": ["error", "never"],
    "template-curly-spacing": ["error", "always"],
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "curly": "error",
    "brace-style": ["error", "1tbs"],
    "space-before-blocks": "error"
  }
}

但是还是breaking eslint，报如下解析错误：

class Person {
  constructor() {
    console.log(this);
    this.hello1();
    this.hello2();
  }

  // breaks eslint, but WHY?

  hello1 = () => {
    console.log(this);
  }
  
  hello2() {
    console.log(this);
  }

}
const P1 = new Person();

它突出显示第一个 = 并说：

Parsing Error unexpected token =

我该如何进一步解决这个问题？ ESLint 正确应用了该文件中的所有规则，但似乎忽略了解析器选项。

还是别的？

我不确定这里是否相关：

https://github.com/babel/babel-eslint#note-babel-eslint-is-now-babeleslint-parser-and-has-moved-into-the-babel-monorepo

但我真的不知道那是什么意思。

Answer 1

我认为您收到 linting 错误是因为您没有使用 ECMA 2022 版（又名 ECMA 最新版本）。请检查 link at shorturl.at/nsAS5，它显示粗箭头 class 方法上没有 lint 错误，因为 ECMA 版本最迟为 2022 年。当您将 ECMA 版本更改为 2021 或更低版本时，您收到 Parsing Error unexpected token = 错误。

另外，我注意到你的一些事情 eslintrc.json:

我想可能是因为 babel-eslint 被弃用了？ https://www.npmjs.com/package/babel-eslint. Maybe you should try @babel/eslint-parser? https://www.npmjs.com/package/@babel/eslint-parser
您的配置看起来有点不对劲。您应该将 parser 键放在 parserOptions 键之外，如下所示：

  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },

见https://eslint.org/docs/user-guide/configuring/language-options

此外，我只想指出 eslint 默认情况下使用 espree 作为其解析器，但您可以使用 esprima 或 @babel/eslint-parser（如果您使用的是 typescript，则可以使用 @typescript-eslint/parser）见 https://eslint.org/docs/user-guide/configuring/plugins

Answer 2

您的配置文件不正确：

这里是这一行：

"parser": "babel-eslint",

什么都不做。不幸的是，它不会抛出错误并继续使用默认解析器。

完成此操作后，如果正确安装了其余依赖项，您就可以开始使用 babel 解析器了。

为什么 ESLint 无法识别我的 class 箭头函数？

Why does ESLint not recognize my class arrow functions?

javascript

babeljs

eslint

class-fields