TypeScript-ESLint 配置指南：从传统模式到扁平配置的迁移要点

在 TypeScript 项目中，ESLint 的配置方式经历了从传统模式到扁平配置(Flat Config)的演变。许多开发者在迁移过程中会遇到配置不生效的问题，特别是关于文件忽略规则的设置。

传统配置与扁平配置的核心差异

传统 ESLint 配置使用 .eslintrc 文件，而新的扁平配置则采用 eslint.config.js 文件。这两种配置方式在结构和行为上有显著不同：

1. 配置结构：传统配置是层级式的，而扁平配置是平面的
2. 忽略规则：文件忽略规则的声明方式完全不同
3. 扩展机制：插件和预设的引用方式有所改变

常见配置误区

很多开发者直接将传统配置转换为扁平配置时，会遇到以下典型问题：

1. 忽略规则失效：在扁平配置中，ignores 字段必须作为独立配置对象才能生效
2. 配置顺序错误：扩展配置(extends)的位置不当会导致规则不生效
3. 文件匹配错误：files 字段的使用方式与传统配置不同

正确的扁平配置实践

对于 TypeScript 项目，推荐的扁平配置应该遵循以下结构：

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

export default tseslint.config({
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
  ],
});

如果需要设置全局忽略规则，应该单独声明一个配置对象：

{
  ignores: ["dist/**/*", "**/__tests__/**"]
}

迁移建议

从传统配置迁移到扁平配置时，开发者应该：

1. 仔细阅读官方文档，理解两种配置体系的差异
2. 不要简单复制粘贴配置，要理解每个配置项的作用
3. 先建立最小可行配置，再逐步添加复杂规则
4. 特别注意文件匹配和忽略规则的语法变化

总结

TypeScript-ESLint 的扁平配置为项目提供了更清晰、更灵活的代码检查方案，但需要开发者投入时间理解其设计理念。正确的配置方式可以避免许多常见问题，提高开发效率。对于刚接触扁平配置的开发者，建议从简单配置开始，逐步掌握其高级特性。