如何在Next.js 13.4.9中集成Airbnb代码风格指南？

1. 卸载eslint-config-next会丢失Next.js特定规则吗？ #

会。eslint-config-next不仅封装了React相关的ESLint插件，还内置了Next.js专属的lint规则，比如：

• 对next/link、next/image等组件的使用规范检查
• SSR/CSR代码的合规性校验
• Next.js路由、API路由的规则约束
• Core Web Vitals相关的代码提示

如果卸载eslint-config-next仅安装兼容版React插件，这些Next.js专属规则会完全丢失，无法再通过next lint检查Next.js项目特有的代码问题。

2. 推荐的Airbnb风格集成方式 #

方案一：用--legacy-peer-deps安装Airbnb配置，保留eslint-config-next #

这是最稳妥的方式，通过跳过peer依赖版本冲突检查，同时保留Airbnb风格和Next.js专属规则：

1. 安装Airbnb ESLint配置及依赖：

npm install -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks --legacy-peer-deps

2. 修改ESLint配置文件（如.eslintrc.json），同时继承Airbnb和Next.js规则：

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "next/core-web-vitals"
  ]
}

注意规则顺序：next/core-web-vitals放在最后，可覆盖Airbnb中与Next.js冲突的规则，同时保留两者的检查能力。

方案二：等待Airbnb配置更新兼容react-hooks 5.x #

如果不想使用--legacy-peer-deps，可以暂时保持现有配置，等待eslint-config-airbnb官方更新，支持eslint-plugin-react-hooks@5.x版本后，再正常安装集成。

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