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

从您链接到的Gatsby文档中：

当您包含自定义.eslintrc文件时，Gatsby可让您完全控制ESLint配置。这意味着它将覆盖内置的eslint-loader，您需要自己启用所有规则。一种方法是使用社区插件gatsby-eslint-plugin。这也意味着默认的ESLint config Gatsby随附将被完全覆盖。如果您仍然想利用这些规则，则需要将它们复制到本地文件中。

因此，看起来您创建.eslintrc.js文件后，就需要从下往上重新构建规则。它会覆盖，不会扩展。

Answer 2

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

当您开始使用自定义.eslintrc.js时，基于这些规则，您将失去构建和在终端中输出的集成。这是因为当您使用自定义文件时，内置的eslint-loader已禁用。实际上在文档页面上是这样说的，但是还不清楚。

要获得回报，您需要将其集成到webpack构建中。最简单的方法是使用文档页面上提到的plugin：gatsby-plugin-eslint。

我提交了issue，以简化自定义集成。

Gatsby扩展ESLint规则将覆盖原始ESLint

2 个答案: