Next.js项目运行ESLint校验报错：无法加载「next」扩展配置该如何解决？

报错原因 #

你执行npx eslint --init生成配置时，不会自动安装Next.js官方提供的ESLint扩展依赖，导致ESLint无法解析extends中配置的next和next/core-web-vitals规则集。

解决步骤 #

• 第一步：安装缺失的依赖包
  执行对应包管理器的安装命令：

  # npm
  npm install -D eslint-config-next @next/eslint-plugin-next
  # yarn
  yarn add -D eslint-config-next @next/eslint-plugin-next
  # pnpm
  pnpm add -D eslint-config-next @next/eslint-plugin-next
  

• 第二步：校验版本和路径
  安装完成后如果仍有报错，检查两个配置点：
  1. 保证eslint-config-next的大版本号和项目中next的大版本号完全一致，比如你项目用Next 13，就要装13.x版本的eslint-config-next
  2. 确认.eslintrc.js存放在项目根目录，和tsconfig.json、package.json处于同一层级，和你配置中parserOptions.project的相对路径匹配

可选优化（针对jest测试场景） #

如果你需要避免测试文件中test、expect等全局变量报未定义错误，可以安装eslint-plugin-jest，并在extends中追加plugin:jest/recommended配置即可。

内容的提问来源于stack exchange，提问作者M.H