ESLint“意外令牌”也解决了文件中的其他问题

如何解决ESLint“意外令牌”也解决了文件中的其他问题

我正在 React 项目中实现 ESLint 和 Prettier，下面的代码给出了令人沮丧的解析错误。

ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />,document.getElementById('tier_comparison_app'),); <-- Parsing error: Unexpected token )

奇怪的是，当我在传递给 render 的第二个参数后删除逗号时，解析错误消失了，揭示了缺少该逗号的预期问题，但还有另一个问题 tier_comparision_app 未定义。

ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />,<-- (correctly  caught as undefined)
  document.getElementById('tier_comparison_app') <-- (correctly saying to insert a comma)
);

更奇怪的是，进行上述更改还揭示了文件中与使用==而不是===有关的问题，这也是预期的行为。关于可能导致这种情况的任何想法？我创建了一个 Pastebin of my .eslintrc.json，因为它的规则有点密集。

解决方法

在写完这篇文章后，我立即意识到我没有在 parser 文件中将 babel-eslint 设置为 .eslintrc.json，如下所示：

"parser": "babel-eslint",

非常简单的解决方案，并且完全理解为什么 ESLint 会遇到解析问题。显然，您需要使用您喜欢的软件包管理器安装 babel-eslint。我会向遇到他们意想不到的解析问题的任何其他人推荐这个，希望我仍然发布这个答案可以帮助其他人。