本文详解如何在 eslint 单配或多层继承场景中，对已继承的规则（如 import/order）进行增量式覆盖，避免全量重写，提升配置可维护性与复用性。
本文详解如何在 eslint 单配或多层继承场景中，对已继承的规则（如 import/order）进行增量式覆盖，避免全量重写，提升配置可维护性与复用性。
在大型 React Monorepo 项目中，常需为不同子包（如 web 和 ui）复用基础 ESLint 配置（如 ./base.json），同时按需定制规则。但直接在子配置中重写整个 import/order 规则（如你当前 web.json 所做）不仅冗余，还易引发遗漏或冲突——一旦 base.json 中 import/order 的 groups 或 newlines-between 调整，web.json 必须同步更新，违背配置继承的设计初衷。
ESLint 原生不支持对嵌套对象规则的“深合并”，但可通过 overrides + 文件匹配机制实现精准、增量式覆盖：仅针对特定文件类型（如 .js 或 .ts）注入增强配置，而保留基线规则的其余部分。
✅ 正确做法：使用 overrides 实现规则增量扩展
将 web.json 改写为如下结构：
{
"extends": ["./base.json", "next/core-web-vitals"],
"overrides": [
{
"files": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
"rules": {
"@next/next/no-img-element": "off",
"import/order": [
"warn",
{
"groups": ["type", "builtin", "external", "internal", "parent", "sibling", "index", "object"],
"pathGroups": [
{
"pattern": "@/custom/**",
"group": "internal"
}
],
"newlines-between": "always"
}
]
}
}
]
}
? 关键说明：
- overrides.files 指定作用范围（推荐覆盖所有源码后缀），确保该规则只在目标文件中生效；
- overrides.rules 中的 import/order 完整定义看似重复，实则是必需的“覆盖入口”；但因其作用域受限，不会污染其他文件，且逻辑清晰；
- 基线 base.json 中的 import/order 配置（如 groups、newlines-between）仍被继承，此处只需补充 pathGroups ——即语义上是“扩展”，技术上是“覆盖+复用”。
⚠️ 注意事项与最佳实践
- 不要省略 groups 和 newlines-between：ESLint 规则值是完整数组 [level, options]，覆盖时必须提供完整选项对象，否则会丢失基线配置；
- 优先使用 overrides 而非顶层 rules：顶层 rules 会无差别覆盖所有文件，破坏基线统一性；overrides 提供粒度控制；
- 路径别名需与 TypeScript/webpack 配置一致：@/custom/** 能被 import/order 识别，前提是你的 tsconfig.json 或 jsconfig.json 已正确定义 baseUrl 和 paths；
- 验证配置是否生效：运行 npx eslint . --ext .js,.jsx,.ts,.tsx --fix 并检查 import 排序结果，或使用 VS Code ESLint 插件实时提示。
✅ 总结
ESLint 的配置继承本质是“浅合并”，无法自动合并嵌套规则对象。通过 overrides 机制，你既能保持 base.json 的纯净与通用性，又能在 web.json 中以声明式方式精准扩展规则细节。这种模式显著提升多环境配置的可维护性，是 Monorepo 场景下的推荐实践。
