扩展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

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

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

为了把它拿回来，你需要把它整合到webpack的建筑里。最简单的方法是使用文档页面上提到的插件：gatsby-plugin-eslint。

我提交了一个问题，以使自定义集成更容易。

Answer 2

从您链接到的盖茨比文档：

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

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