深入解析antfu/eslint-config中TypeScript成员分隔符样式问题

在TypeScript开发中，接口和类型定义的分隔符样式是一个常见的代码风格问题。最近在使用antfu/eslint-config配置时，开发者遇到了一个有趣的现象：保存文件时，接口成员的分号会自动切换，有时添加有时删除。

问题现象

当开发者在TypeScript文件中定义接口时，会出现以下情况：

interface Foo {
    bar: string  // 保存后会自动添加分号
}

interface Bar {
    foo: string; // 保存后会自动移除分号
}

这种自动切换行为显然不是开发者期望的，它会导致代码风格不一致，甚至可能引发版本控制系统的无意义变更。

问题根源

这个问题源于ESLint的member-delimiter-style规则与基础分号规则的交互。在TypeScript中，接口和类型定义的成员分隔符可以配置为使用分号、逗号或者不适用任何分隔符。当多个相关规则配置不一致时，就会出现这种"乒乓"效应。

解决方案

antfu/eslint-config的最新版本(v2.6.3)已经修复了这个问题。修复方案主要涉及对member-delimiter-style规则的优化，确保其与基础分号规则的一致性。

对于需要自定义配置的开发者，可以采用以下配置方式：

antfu({
    stylistic: {
        semi: true,
        overrides: {
            'style/member-delimiter-style': [
                'error',
                {
                    multiline: {
                        delimiter: 'semi',
                        requireLast: true,
                    },
                    singleline: {
                        delimiter: 'semi',
                        requireLast: true,
                    },
                    multilineDetection: 'brackets',
                },
            ],
        },
    },
})

这个配置明确指定了：

1. 基础分号规则启用
2. 覆盖member-delimiter-style规则
3. 无论是多行还是单行定义，都要求使用分号作为分隔符
4. 要求最后一个成员也必须包含分号
5. 使用括号作为多行检测的依据

最佳实践

为了避免类似问题，建议开发者：

1. 保持ESLint配置和相关插件的最新版本
2. 对于TypeScript项目，明确配置成员分隔符样式
3. 在团队项目中统一代码风格配置
4. 定期检查自动格式化工具的运行结果

通过合理的配置，可以确保代码风格的统一性，同时避免自动格式化工具带来的意外变更。antfu/eslint-config作为一套精心设计的ESLint配置，为TypeScript项目提供了良好的代码风格基础，开发者可以根据项目需求进行适当的自定义配置。