ESLint Stylistic 规则冲突解析：key-spacing 与 no-multi-spaces 的兼容性问题

在 TypeScript 项目中使用 ESLint Stylistic 插件时，开发者可能会遇到 @stylistic/key-spacing 和 @stylistic/no-multi-spaces 两条规则之间的冲突问题。这种冲突特别容易出现在接口类型定义和对象字面量的对齐场景中。

问题现象

当同时启用以下两条规则配置时：

'@stylistic/key-spacing': ['error', { align: 'value' }],
'@stylistic/no-multi-spaces': ['error', { exceptions: { Property: true } }],

对于如下 TypeScript 接口定义：

export interface User {
  id: number
  name: string
}

ESLint 会报告 Missing space before value for key 'id' 错误。而当开发者尝试添加空格进行对齐：

export interface User {
  id:   number
  name: string
}

又会触发 Multiple spaces found before 'number' 错误。这种互相矛盾的情况让开发者陷入两难。

问题根源

这个问题的根本原因在于 TypeScript 解析器 (@typescript-eslint/parser) 处理类型注解时使用了不同于常规 JavaScript 的 AST 节点类型。具体来说：

1. 在 JavaScript 中，对象属性的类型注解会被解析为 Property 节点
2. 在 TypeScript 中，类型注解会被解析为 TSTypeAnnotation 节点

因此，虽然我们为 Property 节点配置了多空格例外，但这个例外并不适用于 TypeScript 的类型注解场景。

解决方案

要解决这个冲突，需要同时为 Property 和 TSTypeAnnotation 节点配置多空格例外：

'@stylistic/no-multi-spaces': ['error', {
  exceptions: {
    Property:         true,
    TSTypeAnnotation: true,
  }
}]

这样配置后，ESLint 将：

1. 允许在对象属性和类型注解前使用多个空格进行对齐
2. 同时保持其他场景下的多空格检查
3. 与 key-spacing 的 align: 'value' 选项完美配合

最佳实践建议

对于 TypeScript 项目，建议采用以下配置组合：

{
  rules: {
    '@stylistic/key-spacing': ['error', {
      align: {
        beforeColon: false,
        afterColon: true,
        on: 'value',
        mode: 'minimum'
      }
    }],
    '@stylistic/no-multi-spaces': ['error', {
      exceptions: {
        Property: true,
        TSTypeAnnotation: true,
        ImportDeclaration: true,
        VariableDeclarator: true,
      }
    }]
  }
}

这种配置能够：

• 保持代码对齐的美观性
• 避免规则冲突
• 同时维护代码风格的一致性
• 覆盖常见的多空格例外场景

理解 ESLint 规则与 TypeScript 解析器的交互方式，对于配置出既严格又实用的代码风格规则至关重要。通过合理配置例外情况，开发者可以兼顾代码美观性和规范性。