升级ESLint相关包后仅报错不展示错误所属文件路径如何解决

问题修复方案 #

• 第一步：先清除ESLint缓存
  你开启了cache配置，旧缓存文件可能存在格式异常，直接删除node_modules/.cache/.eslintcache目录后重启项目验证。
• 第二步：验证formatter兼容性
  你当前使用的react-dev-utils/eslintFormatter对高版本ESLint（v8及以上）兼容性较差，可先注释掉配置中的formatter字段，使用ESLint默认格式化器测试：如果默认格式化器能正常输出文件路径，就说明是formatter的问题。
  解决方法二选一：
  1. 升级react-dev-utils到适配你当前ESLint版本的最新版
  2. 替换为兼容高版本ESLint的格式化器，比如eslint-formatter-friendly
• 第三步：检查ESLintPlugin和webpack的版本匹配
  你未升级webpack，若当前webpack是v4版本，ESLintPlugin v7及以上仅支持webpack5，版本不兼容会导致输出信息丢失，需要将eslint-webpack-plugin降级到v6.x的最新版本即可。
• 第四步：调整ESLint配置存放位置
  不要在ESLintPlugin的baseConfig字段里写规则配置，把对应的规则和extends配置挪到项目根目录的.eslintrc.js文件中，inline配置容易导致ESLint上下文解析异常，丢失文件关联信息。

内容的提问来源于stack exchange，提问作者Kurtis