TypeScript-ESLint 配置合并中的意外行为分析与解决方案

在 TypeScript-ESLint 项目中，开发者在使用 tseslint.config() 方法进行 ESLint 配置时可能会遇到两个关键问题，这些问题会影响配置的预期行为。本文将深入分析这些问题产生的原因，并提供相应的解决方案。

问题一：extends 导致全局忽略规则异常

当在配置中使用 extends 属性时，会出现一个意外的行为：配置中的 ignores 规则会被提升为全局忽略规则，影响整个 ESLint 配置。

问题表现

考虑以下配置示例：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  {
    extends: [tseslint.configs.disableTypeChecked],
    ignores: ['**/*.ts', '**/*.tsx'],
  }
);

开发者期望的是 ignores 规则仅应用于当前配置项，但实际上这些忽略规则会被提升为全局规则，导致所有 TypeScript 文件(.ts/.tsx)都被忽略。

根本原因

这是由于 config-helper.ts 在处理配置合并时的逻辑缺陷。当使用 extends 时，它会错误地将 ignores 规则提取出来并创建一个额外的全局配置项。

解决方案

临时解决方案是避免在这种场景下使用 extends，而是直接展开配置：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    ignores: ['**/*.ts', '**/*.tsx'],
    ...tseslint.configs.disableTypeChecked,
  }
];

问题二：不必要的冗余配置生成

另一个问题是当配置中只包含元数据键(如 files, ignores, name)时，会生成一个无实际作用的冗余配置项。

问题表现

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  {
    extends: [tseslint.configs.disableTypeChecked],
    files: ['file'],
    ignores: ['ignored'],
    name: 'my-config',
  }
);

这会生成两个几乎相同的配置项，其中第二个配置项只包含元数据，没有任何实际规则，增加了调试复杂度。

根本原因

配置合并逻辑没有正确处理仅包含元数据键的情况，导致生成了不必要的配置层。

解决方案

同样建议直接展开配置，避免使用 extends：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['file'],
    ignores: ['ignored'],
    name: 'my-config',
    ...tseslint.configs.disableTypeChecked,
  }
];

最佳实践建议

1. 谨慎使用 extends：在当前版本中，直接在配置对象中使用 extends 可能会导致意外行为，建议优先考虑展开配置的方式。

2. 明确配置层级：对于复杂的配置，建议明确分层处理，避免依赖自动合并逻辑。

3. 定期检查生成配置：使用 ESLint 的调试工具检查最终生成的配置是否符合预期。

4. 关注更新：这些问题已在项目的 issue 跟踪系统中记录，并有望在未来版本中修复，建议关注项目更新。

通过理解这些配置合并的边界情况，开发者可以更有效地构建 TypeScript-ESLint 配置，避免潜在的问题。