如何在Yarn 4.x版本中使用ESLint？配置报错求助

问题概述 #

在Yarn 4.x环境中运行eslint src/时，ESLint抛出错误：无法找到"airbnb"配置，即使已安装eslint-config-airbnb及相关依赖，且尝试过--resolve-plugins-relative-to选项无效。核心原因是Yarn 4默认启用**PnP（Plug'n'Play）**模式，依赖不再存储在传统node_modules目录，导致ESLint默认模块解析逻辑无法定位到配置文件。

解决方案 #

方案1：适配Yarn PnP模式（推荐）

Yarn官方提供了ESLint插件来适配PnP环境，步骤如下：

1. 安装Yarn ESLint相关依赖：

yarn add -D @yarnpkg/eslint-plugin @yarnpkg/eslint-config

2. 修改.eslintrc.js，将Yarn的配置加入extends（放在最优先级）：

module.exports = {
  // ...其他配置
  extends: [
    '@yarnpkg',
    'airbnb',
    'airbnb-typescript',
    'prettier',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/typescript',
  ],
  // 添加PnP解析配置
  settings: {
    'import/resolver': {
      node: false,
      '@yarnpkg/eslint-plugin': {},
    },
  },
  // ...其他配置
};

3. 通过Yarn运行ESLint命令：

yarn eslint src/

方案2：切换回传统node_modules模式

如果不需要PnP特性，可以修改Yarn配置恢复传统依赖存储方式：

1. 在项目根目录创建/修改.yarnrc.yml，添加：

nodeLinker: node-modules

2. 重新安装依赖：

yarn install

3. 直接运行ESLint命令即可：

eslint src/

方案3：使用第三方PnP解析插件

通过eslint-import-resolver-pnp让ESLint支持PnP依赖解析：

1. 安装解析插件：

yarn add -D eslint-import-resolver-pnp

2. 修改.eslintrc.js的settings：

module.exports = {
  // ...其他配置
  settings: {
    'import/resolver': {
      pnp: {},
    },
  },
  // ...其他配置
};

3. 通过Yarn运行ESLint命令：

yarn eslint src/

验证 #

完成上述任意方案配置后，运行对应的ESLint命令，检查是否仍存在找不到配置的错误。若配置正确，ESLint将正常加载airbnb规则并检查代码。

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