如何在已有eslint配置的项目中搭配Next.js使用eslint

第一步：调整根目录ESLint配置 #

在你现有.eslintrc.yml的最顶部添加root: true，明确标记这是项目顶层配置，避免ESLint向上查找多余配置，修改后的开头部分如下：

root: true # 新增这一行
env:
  es2020: true
  node: true
# 其余原有配置全部保持不变

第二步：调整Next.js项目的ESLint配置 #

清空website/.eslintrc.json的原有内容，替换为以下配置。它会自动继承根目录的所有校验规则，同时叠加Next.js框架专属的校验逻辑：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals",
    "next/typescript" // 若你的Next.js项目未使用TypeScript，可删除这一行
  ],
  "rules": {
    // 此处可单独覆写根目录规则，仅对Next.js项目生效
    // 示例：Next.js项目允许打印console的话可以加下面这行
    // "no-console": "off"
  }
}

第三步：安装必要依赖 #

在项目根目录执行命令安装Next.js专属的ESLint插件：

npm install @next/eslint-plugin-next --save-dev
# 使用yarn/pnpm的用户替换为对应包管理器的安装命令即可

验证配置生效 #

执行以下两条命令分别校验两部分代码，确认规则都能正常触发：

# 校验原有Node.js项目代码
npx eslint src/
# 校验新增的Next.js项目代码
npx eslint website/

注意事项 #

• 如果根目录存在.eslintignore文件，确认没有把website/目录加入忽略列表，否则Next.js的代码不会被ESLint校验。
• ESLint默认会从待校验文件所在目录向上逐层合并配置，子目录配置的优先级高于父目录，你可以在Next.js的配置中随意调整规则，不会影响原有Node.js项目的校验逻辑。

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