TurboRepo中Web应用无法找到ESLint配置包依赖插件的问题

问题原因 #

ESLint默认会从当前项目（webapp）的node_modules目录查找插件，而你的eslint-config-custom包将插件作为自身依赖安装，导致webapp无法直接访问这些插件。

解决方案 #

方案1：配置插件加载路径（推荐） #

在eslint-config-custom的主配置文件中添加resolvePluginsRelativeTo选项，指定从配置包自身目录加载插件：

// eslint-config-custom/index.js
module.exports = {
  extends: [
    'turbo',
    'prettier',
    'react-native',
    // 你的其他扩展配置
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jsx-a11y', 'import'],
  // 关键配置：指向当前配置包的目录
  resolvePluginsRelativeTo: __dirname,
  rules: {
    // 你的规则配置
  }
};

这样webapp在使用该配置时，ESLint会自动从eslint-config-custom的node_modules中查找所需插件，无需在webapp中重复安装。

方案2：将插件声明为peerDependencies #

调整eslint-config-custom的package.json，把ESLint相关插件从dependencies移到peerDependencies，符合ESLint共享配置的最佳实践：

{
  "name": "eslint-config-custom",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "format": "prettier --write ./*.js"
  },
  "peerDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "eslint": "^8.35.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-config-react-native": "^4.1.0",
    "eslint-config-turbo": "^0.0.9",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0"
  },
  "devDependencies": {
    "typescript": "^4.9.5"
  },
  "publishConfig": {
    "access": "public"
  }
}

执行根目录的包管理器安装命令（npm install/yarn install/pnpm install）后，TurboRepo会将这些依赖hoist到根目录的node_modules，webapp即可访问到插件。

方案3：检查TurboRepo的hoisting配置 #

确保根目录package.json中的Turbo配置启用了依赖hoisting：

{
  "turbo": {
    "hoistDependencies": true,
    "npmClient": "npm" // 根据你的包管理器替换为yarn/pnpm
  }
}

重新执行安装命令，确保所有依赖被正确提升到根目录。

额外检查 #

确认webapp的ESLint配置文件正确引用了共享配置：

// webapp/.eslintrc.js
module.exports = {
  extends: ['custom'],
  // 其他项目专属配置
};

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