作为一名软件工程师，维护和更新基础设施是你的日常任务，确保它们始终与时俱进。想象一个工程电脑控制台，终端上展示着配置档案，整体风格呈现80年代的合成波特色。
尽管我更像一位质量保证工程师，但JavaScript的一些工具帮助我进行自动化测试。ESLint和Prettier等工具能协助编写整洁的代码，并且设置起来也相当简便。这让我可以在不深入了解细节的情况下，依然能获取最大的效益。当我需要从ESLint v8升级到ESLint v9时，情况就截然不同了。
ESLint是一款用于分析和确保JavaScript（以及TypeScript）代码质量的工具。ESLint v9.0.0于2024年4月发布，但对v8.x版本的支持将在同年10月5日结束。虽然半年的迁移时间听起来似乎足够，但ESLint v9引入的全新扁平化配置系统破坏了向后兼容性，这意味着需要重新编写配置文件。这无疑是一个巨大的挑战，许多开发者对此感到困扰。为此，ESLint推出了配置迁移器和配置检查器来简化这一过程。
在实际操作之前，我决定先在测试样板仓库上进行实验。原有的ESLint v8的.eslintrc配置文件虽然简洁，但升级过程却相当繁琐。这个配置文件主要包括以下内容：
它声明这是一个根配置文件，使用的是TypeScript ESLint解析器。接着，指定了项目的配置文件路径，并列举了要使用的插件，包括TypeScript ESLint插件和简单导入排序插件。它继承了ESLint推荐的规则和TypeScript ESLint推荐的规则，并启用了一些错误规则，如检测未处理的异步promise、检测逗号未闭合的情况以及检测导入和导出语句的排序问题。
原本，我计划参考文档从头开始编写一个新的配置文件。看起来似乎是个简单的任务：创建eslint.config.mjs文件，然后复制粘贴现有的规则。事实证明这并非易事。因为对于每一个配置键，你都必须翻阅多页文档，去匹配新的格式，包括新的推荐配置扩展方式、新的插件链接方式等等。面对这种复杂性，我决定尝试一种名为“Configuration Migrator”的工具。
运行ESLint配置迁移工具后，我使用了命令 `npx @eslint/migrate-config .eslintrc`。令我惊喜的是，我得到的新配置长度是原来的两倍！这个新的配置文件涉及到多个插件和解析器的引入和使用，包括typescriptEslint、simpleImportSort以及tsParser等。还需要处理node的路径和URL转换等细节。
为了使其正常运行，我还需要安装两个额外的包：@eslint/js 和 @eslint/eslintrc，并在tsconfig.json中引用eslint.config.mjs。整个配置过程涉及到复杂的编程概念和技术细节，但我相信通过逐步的调试和测试，我能够成功地完成这个配置，让ESLint在新的环境中发挥更大的作用。
使用export default和一堆包含文件路径的常量来配置项目似乎有些复杂且不靠谱，尤其是在官方文档中并未提及此种方式。我在首次尝试时便遇到了问题。解析错误提示我，为@typescript-eslint/parser提供了'parserOptions.project'选项，但在项目中找不到文件eslint.config.mjs。
迁移过程中遭遇挫折，我决定简化配置，只保留看起来合理的配置行，并删除其他行。我通过填写忽略的文件和files两个键，移除了.eslintignore文件。接着，根据文档手动安装了typescript-eslint插件，它提供了一种不同的配置方法。
我采用了新的ESLint版本，并且将[@typescript-eslint/eslint-plugin]包更改为[typescript-eslint]，作为使用此工具链的新推荐方式。不知为何，我合并了配置文件，但只有在主配置文件置于所有推荐配置文件之上时才生效。
我深入挖掘了问题所在。使用Config Inspector工具，我发现唯一的规则“comma-dangle”已被弃用。我需要从额外的包@stylistic/eslint-plugin中使用相应的规则，幸好ESLint Stylistic的文档非常出色，为我提供了指引。
ESLint配置核查器是一个极其有用的工具。唯一令我困惑的是，迁移工具为何选择了ecmaVersion: 5这个语言选项，而我在tsconfig.json中设置的是较新的版本。为了确保一切顺利，我将ecmaVersion更改为默认值latest，并更新了tsconfig.json。我对小仓库的这些基本改变感到满意。
尽管ESLint正常工作，但当我尝试测试其是否能捕捉代码错误时，我注意到在保存文件时，Prettier开始删除TypeScript的泛型注解。例如，一个函数async getLang(): Promise { return await this.lang; }被格式化为异步获取语言(): Promise { return await this.lang; }。这简直是一场灾难，StackOverflow也未能提供帮助。我怀疑Prettier与新的ESLint规则产生了冲突，尝试使用eslint-plugin-prettier插件解决但无效。
在ESLint v9中，配置eslint.config.mjs开始变得更为丰富和细致。为了更好地控制代码质量和风格，我们需要引入多个插件和配置。
我们从'@eslint/js'中导入eslint，确保我们的代码符合既定的规则。为了赋予TypeScript更丰富的风格检查能力，我们添加了'@stylistic/eslint-plugin-ts'插件。
为了集中管理我们的配置，我们决定忽略node_modules文件夹下的所有文件，以及其他如test-results和playwright-report文件夹下的内容。这样做可以让我们专注于项目的核心代码，忽略那些由工具生成或管理的文件。
为了匹配所有的JavaScript（.js）和TypeScript（.ts）文件，我们在配置中指定了files字段。这样ESLint就会知道应该在哪些文件中进行代码检查。
我们还引入了一些有用的插件，如'simple-import-sort'，帮助我们更好地管理导入语句的顺序和格式。我们通过'typescript-eslint'来增强ESLint对TypeScript的支持。
在rules部分，我们定义了一些重要的规则。例如，我们禁止在多行时使用不完整的逗号，禁止使用未处理的Promise，以及要求导入和导出语句必须符合规范。
我们还采用了eslint的推荐配置，以及'typescript-eslint'的推荐配置，以确保我们的代码符合社区的最佳实践。我们还引入了'eslint-plugin-prettier'的推荐配置，以确保我们的代码既符合ESLint的规则，也符合Prettier的格式要求。
对于npm脚本，我们进行了简化。原本复杂的命令现在变得更加简洁明了。我们只需要运行"lint"命令就可以检查所有的JavaScript和TypeScript文件，而"lint:fix"命令则可以自动修复其中的问题。
尽管初始配置相对简单，但在实践中，我们仍然遇到了一些挑战。通过不断学习和调整，我们逐渐解决了这些问题，使ESLint更好地为我们的项目服务。对于那些安装了众多插件和遵循数十条规则的朋友，迁移之路或许充满了挑战（或许有人已选择放弃），但我们依然对ESLint新版本的潜在优势充满期待，希望其带来的好处能够超越迁移的成本。
关于ESLint的旅程：从旧版本到新的天地。我们一直在探索如何更好地导航ESLint的新扁平配置，以拥抱未来的可能性。我们也对eslint-config-prettier如何在实际操作中发挥作用充满好奇。
在实际尝试在生产项目中更新ESLint时，我们发现了一些棘手的问题。一些插件竟然与ESLint 9不兼容，这意味着我们无法在不改变现有开发环境的前提下顺利切换到最新版本。这无疑给我们的升级之路带来了困扰。我们决定暂时继续使用第八版本（v8.57），并寻找解决方案。我们将持续关注ESLint的更新和插件的兼容性，以便在合适的时机进行升级。对于这一挑战，我们不会轻言放弃，而是积极寻找解决方案，期待在未来的升级中顺利前行。 |
