深入解析antfu/eslint-config中ignores与rules的配置问题

问题背景

在使用antfu提供的eslint-config时，许多开发者遇到了一个看似奇怪的现象：当同时配置ignores和rules时，两者似乎都不起作用。这实际上是由于ESLint扁平化配置(flat config)的工作机制导致的，而非配置包本身的问题。

现象分析

开发者通常会尝试以下配置方式：

export default antfu({
  ignores: ['**/*.config.js'],
  rules: {
    semi: 'error'
  }
})

直觉上，这应该表示"对所有文件应用semi规则，但排除.config.js文件"。然而实际上，这种配置方式会导致ignores和rules都不生效。

根本原因

ESLint的扁平化配置机制规定：

1. 当配置对象中只有ignores属性时，这些忽略规则会应用到所有文件
2. 当配置对象同时包含ignores和其他属性(如rules)时，该配置对象仅适用于未被ignores排除的文件

因此，上述配置的实际含义变成了"仅对非.config.js文件应用semi规则"，而由于antfu的配置已经包含了默认规则，这种覆盖方式会导致预期外的行为。

正确配置方式

正确的做法是将全局忽略和规则覆盖分成两个独立的配置对象：

export default antfu(
  {
    // 全局忽略配置
    ignores: ['**/*.config.js']
  },
  {
    // 规则覆盖配置
    rules: {
      semi: 'error'
    }
  }
)

这种结构清晰地分离了两种不同的配置意图，使ESLint能够正确解析和应用。

实际应用建议

1. 全局忽略：对于需要完全排除在lint检查外的目录或文件(如public、dist等)，应放在第一个配置对象中

2. 规则定制：对于需要修改默认规则的配置，应放在后续的配置对象中

3. 多环境配置：对于不同环境的配置(如测试文件)，可以使用files属性配合rules进行针对性设置

总结

理解ESLint扁平化配置的工作机制对于正确使用antfu/eslint-config至关重要。通过将不同类型的配置分离到不同的配置对象中，可以避免常见的配置冲突问题，确保lint规则按预期工作。这种配置方式虽然初看不够直观，但提供了更精确的控制能力，适合复杂的项目结构。