为什么 ESLint 不能识别我的类箭头函数？答案

【问题标题】：Why does ESLint not recognize my class arrow functions?为什么 ESLint 不能识别我的类箭头函数？
【发布时间】：2022-01-02 22:39:45
【问题描述】：

我按照How do I configure ESLint to allow fat arrow class methods 上的建议将解析器设置为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"
  }
}

但是还是破坏了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();

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

解析错误意外令牌 =

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

还是别的什么？

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

【问题讨论】：

具体的eslint错误是什么？
变量真的定义了吗？你的 Babel 设置是什么？给minimal reproducible example。
请只发minimal reproducible example。我们只需要看相关代码。（编辑：谢谢）
我可以复制该问题 (bit.ly/3JAh3nl) - 这绝对是一个配置问题，并且一直存在于 since at least 2015
你还没有展示你的 Babel 配置，它包含类属性吗？根据babeljs.io/docs/en/babel-plugin-proposal-class-properties，它们在 ES2022 的预设中，不是 ecmaVersion: 12。

标签： javascript babeljs eslint class-fields

【解决方案1】：

我认为您遇到该 linting 错误是因为您没有使用 ECMA 版本 2022（又名 ECMA 最新版本）。请检查 shorturl.at/nsAS5 上的此链接，因为 ECMA 版本最迟为 2022，因此胖箭头类方法上没有显示任何 lint 错误。当您将 ECMA 版本更改为 2021 或更低版本时，您会收到 Parsing Error unexpected token = 错误。

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

我认为这可能是因为 babel-eslint 已被弃用？ https://www.npmjs.com/package/babel-eslint。也许你应该试试@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-eslint/parser，如果您使用的是 typescript）参见 @ 987654324@

【讨论】：

谢谢，正如你所说，我的配置文件不正确。谢谢！ ...可悲的是，我有一个新错误，我将在此发表评论。

【解决方案2】：

你的配置文件不正确：

这里的这一行：

"parser": "babel-eslint",

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

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

【讨论】：