解决ESLint在Monorepo中TS配置解析问题：antfu/eslint-config实战经验

问题背景

在Monorepo项目中使用antfu/eslint-config配置时，开发者可能会遇到一个棘手的问题：当通过VSCode打开多个子项目时，ESLint对TypeScript配置文件的解析会出现路径混乱。具体表现为IDE中显示的TS解析路径会"卡"在第一个打开的项目路径上，而命令行执行却完全正常。

问题现象分析

这种问题通常表现为：

1. 在VSCode中打开第一个子项目时，ESLint校验工作正常
2. 当切换到另一个子项目时，ESLint仍然引用第一个项目的tsconfig.json路径
3. 通过命令行执行lint命令(turbo lint等)却能正确识别各子项目的配置

根本原因

经过深入排查，发现问题源于ESLint配置中对TypeScript项目路径的指定方式。在antfu/eslint-config的配置中，如果使用tsconfigPath属性直接指定路径，会导致VSCode ESLint扩展在Monorepo环境下无法正确识别当前工作目录。

解决方案

正确的配置方式应该是使用parserOptions.project来指定TypeScript配置文件路径：

typescript: {
  parserOptions: {
    project: "./tsconfig.json",
  },
},

而非原先的：

typescript: {
  tsconfigPath: "./tsconfig.json",
},

技术原理

这种差异之所以重要，是因为：

1. parserOptions.project是@typescript-eslint/parser的标准配置方式，它能更好地与ESLint的解析机制集成
2. 在Monorepo环境下，ESLint扩展会为每个工作区维护独立的解析上下文
3. 使用标准配置方式能确保路径解析基于当前文件的上下文，而非固定的工作目录

最佳实践建议

对于Monorepo项目中的ESLint配置，建议：

1. 统一使用parserOptions.project方式指定TypeScript配置
2. 确保每个子项目都有独立的ESLint配置
3. 对于共享配置，使用extends机制而非直接引用
4. 在根目录配置中设置适当的工作目录模式

验证方法

验证配置是否生效的方法包括：

1. 在VSCode中切换不同子项目，观察TS配置路径是否正确更新
2. 检查VSCode ESLint扩展的输出日志
3. 对比命令行执行和IDE中的校验结果

通过这种方式配置后，ESLint在Monorepo各子项目中的TypeScript校验将能够正确识别各自的tsconfig.json文件路径，解决路径混乱的问题。