Gatsby扩展ESLint规则覆盖原始ESLint

Question

我遵循文档中的指示https://www.gatsbyjs.org/docs/eslint/，并且希望覆盖其中一个规则，但不影响其他规则，我所做的是创建一个.eslintrc.js文件。

这是文件的内容

module.exports = {
globals: {
__PATH_PREFIX__: true,
},
extends: `react-app`,
"rules": {
'jsx-a11y/no-static-element-interactions': [
'error',
{
handlers: [
'onClick',
'onMouseDown',
'onMouseUp',
'onKeyPress',
'onKeyDown',
'onKeyUp',
],
},
],
}
}

但其他规则现在被忽略了，就像它不是的扩展一样

Answer 1

虽然上面的答案是正确的，但有点不完整。问题是esint既可以在构建中集成，也可以在编辑器中集成。

当您开始使用自定义.eslintrc.js时，您将失去基于这些规则在终端中构建和输出的集成。这是因为当您使用自定义文件时，内置的esint加载程序会被禁用。事实上，文档页面上是这样写的，但有点不清楚。

要想恢复，您需要将其集成到webpack构建中。最简单的方法是使用文档页面上提到的插件：gatsby-plugin-eslint。

我提交了一个问题，以简化自定义集成。

Answer 2

从您链接到的Gatsby文档：

当您包含自定义的.eslintrc文件时，Gatsby会让您完全控制ESLint配置。这意味着它将覆盖内置的esint加载程序，并且您需要自己启用任何和所有规则实现这一点的一种方法是使用社区插件gatsby-esint插件。这也意味着Gatsby附带的默认ESLint配置将被完全覆盖。如果你仍然想利用这些规则，你需要将它们复制到你的本地文件中。

因此，一旦创建了.eslintrc.js文件，就需要重新从头开始构建规则。它覆盖，不扩展。