pnpm创建的Next.js项目中eslint-config-next的Peer依赖问题

不用移除eslint-config-next，也不用安装TypeScript，有两种靠谱的解决方式：

方法1：让pnpm忽略TS的peer依赖缺失警告 #

pnpm对peer依赖的检查非常严格，你可以通过配置告诉它忽略TypeScript的缺失警告，完全不影响项目运行：

• 在项目根目录的package.json中添加pnpm专属配置：

{
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": ["typescript"]
    }
  }
}

• 或者在.npmrc文件中添加一行配置：

peerDependencyRules.ignoreMissing=typescript

保存配置后重新运行pnpm install，警告就会消失。

方法2：替换eslint-config-next为纯JS的ESLint配置 #

如果你不想保留eslint-config-next，可以手动搭建适合JS项目的ESLint规则：

1. 先卸载eslint-config-next：

pnpm remove eslint-config-next

2. 安装基础的React ESLint插件：

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

3. 在.eslintrc.json中配置规则（示例）：

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "jsx-a11y"],
  "rules": {
    "react/react-in-jsx-scope": "off" // Next.js 13+不需要React导入
  }
}

为什么会出现这个警告？ #

eslint-config-next为了同时支持TS和JS项目，内置依赖了@typescript-eslint/parser、@typescript-eslint/typescript-estree这些工具，而这些工具声明了TypeScript作为peer依赖。pnpm的严格检查会识别到这些依赖的peer依赖未安装，所以抛出警告——但对你的JS项目来说，这些TS相关工具其实不会被实际调用，所以忽略警告完全安全。

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