前端项目 ESLint 配置方案深度对比：Airbnb vs Google vs Standard

在构建现代 JavaScript 应用时，选择一套合适的 ESLint 配置方案往往比编写业务代码更早遇到。eslint-config-airbnb、eslint-config-google 和 eslint-config-standard 是生态中最具代表性的三个选择。它们不仅仅是规则集合，更代表了三种不同的工程哲学：严格管控、简洁实用和约定优先。让我们从实际开发场景出发，深入对比它们的差异。

📏 规则严格度：企业级管控 vs 简洁实用 vs 社区约定

eslint-config-airbnb 是三者中最严格的配置，它包含了大量的规则来约束代码的每一个角落。

• 它强制要求编写 React 组件时必须定义 propTypes 或使用 TypeScript。
• 它对变量未使用、箭头函数写法等都有细致规定。

// .eslintrc.js for airbnb
module.exports = {
  extends: ['airbnb'],
  rules: {
    // 即使你不想写 propTypes，Airbnb 默认也会强制要求
    'react/prop-types': 'error'
  }
};

eslint-config-google 的规则相对宽松，主要关注代码的可读性和基本结构。

• 它不会强制要求 React 特定的规范，更侧重于 JavaScript 语言本身。
• 适合希望减少规则干扰，专注于业务逻辑的团队。

// .eslintrc.js for google
module.exports = {
  extends: ['google'],
  rules: {
    // Google 配置对缩进和引号有规定，但不会强制 React 特定规则
    'indent': ['error', 2]
  }
};

eslint-config-standard 强制执行 StandardJS 社区约定，最显著的特点是无分号风格。

• 它通过“零配置”理念，让开发者无需关心规则细节，只需遵循标准。
• 如果违反风格（如加分号），会直接报错，没有商量余地。

// .eslintrc.js for standard
module.exports = {
  extends: ['standard'],
  rules: {
    // Standard 强制无分号，如果你写了分号会报错
    'semi': ['error', 'never']
  }
};

⚛️ React 支持：原生深度集成 vs 通用 JS 规范 vs 需额外插件

eslint-config-airbnb 对 React 的支持是最完善的，它内置了 eslint-plugin-react 的大量规则。

• 安装后开箱即用，无需额外配置即可检查 JSX 语法和组件生命周期。
• 适合重度依赖 React 生态的大型项目。

// Airbnb: 自动包含 React 规则
// 组件未使用 props 会直接报错
function MyComponent({ unused }) {
  return <div>Hello</div>; // Error: 'unused' is defined but never used
}

eslint-config-google 本质上是通用 JavaScript 规范，对 React 没有特殊照顾。

• 如果需要检查 React 代码，通常需要手动添加 eslint-plugin-react。
• 适合混合技术栈或主要编写纯 JavaScript 逻辑的项目。

// Google: 需要手动扩展 React 支持
module.exports = {
  extends: ['google', 'plugin:react/recommended'],
  // 否则不会检查 JSX 特定问题
};

eslint-config-standard 同样专注于 JS 基础，对 React 支持需要额外引入 eslint-config-standard-react。

• 它的核心理念是保持配置简单，React 支持被视为可选扩展。
• 适合希望保持配置轻量，且团队熟悉 Standard 风格的 React 项目。

// Standard: 需要额外包支持 React
module.exports = {
  extends: ['standard', 'standard-react']
  // 基础包不包含 JSX 规则
};

🛠️ 配置复杂度：依赖沉重 vs 轻量简单 vs 零配置

eslint-config-airbnb 的安装和配置成本最高，因为它依赖大量的子包。

• 你需要安装 eslint-config-airbnb 以及所有相关的 peer dependencies。
• 更新 ESLint 版本时，容易遇到依赖冲突问题。

# Airbnb: 需要运行命令自动安装所有依赖
npx install-peerdeps --dev eslint-config-airbnb

eslint-config-google 的依赖非常少，安装过程简单直接。

• 它不强制绑定特定版本的 ESLint 插件，兼容性较好。
• 适合希望快速搭建环境，不想处理依赖地狱的团队。

# Google: 直接安装即可
npm install --save-dev eslint-config-google

eslint-config-standard 主打“零配置”，通常配合 standard 命令行工具使用。

• 你甚至不需要创建 .eslintrc 文件，直接运行 standard 命令即可。
• 极大地降低了新项目的启动门槛。

# Standard: 甚至不需要配置文件
npx standard
# 或者在 package.json 中添加 "standard" 字段

🔄 与 Prettier 的兼容性：冲突较多 vs 较好兼容 vs 风格冲突

eslint-config-airbnb 与 Prettier 配合时需要小心处理规则冲突。

• Airbnb 对某些格式（如对象空格）有严格规定，可能与 Prettier 默认设置冲突。
• 通常需要引入 eslint-config-prettier 来关闭格式类规则。

// Airbnb + Prettier: 必须关闭冲突规则
module.exports = {
  extends: ['airbnb', 'prettier'],
  // 否则 ESLint 和 Prettier 会打架
};

eslint-config-google 的规则相对较少，与 Prettier 的冲突点也较少。

• 它主要关注逻辑错误，格式类规则不多，容易与 Prettier 共存。
• 适合已经决定使用 Prettier 处理格式，ESLint 仅处理逻辑的团队。

// Google + Prettier: 冲突较少
module.exports = {
  extends: ['google', 'prettier']
};

eslint-config-standard 本身包含大量格式规则（如缩进、分号），与 Prettier 存在天然冲突。

• Standard 坚持自己的格式风格，不建议与 Prettier 混用。
• 如果强行混用，需要禁用大量 Standard 规则，失去了使用它的意义。

// Standard + Prettier: 不推荐混用
// Standard 强制无分号，Prettier 默认加分号，配置成本高

🌐 实际场景推荐

场景 1：大型 React 企业应用

• ✅ 最佳选择：eslint-config-airbnb
• 理由：严格的规则能防止低级错误，内置的 React 规范能统一组件写法，适合多人协作。

// 典型配置
module.exports = {
  extends: ['airbnb', 'airbnb/hooks'],
  env: { browser: true, node: true }
};

场景 2：Node.js 后端或通用库开发

• ✅ 最佳选择：eslint-config-google
• 理由：规则简洁，不强制前端框架规范，专注于 JavaScript 语言本身的健壮性。

// 典型配置
module.exports = {
  extends: ['google'],
  env: { node: true, es6: true }
};

场景 3：开源项目或快速原型

• ✅ 最佳选择：eslint-config-standard
• 理由：零配置启动，风格鲜明，能迅速统一贡献者的代码风格，减少维护成本。

// 典型配置 (package.json)
{
  "standard": {
    "globals": ["describe", "it"]
  }
}

📊 核心差异总结

💡 架构师建议

eslint-config-airbnb 就像一套精密的工业标准 🏭——虽然穿戴繁琐，但能最大程度保证生产安全。适合那些不能容忍代码风格不一致、且有专门基建团队维护配置的大型项目。

eslint-config-google 就像一套舒适的商务休闲装 👔——得体且不拘束，适合大多数日常开发场景。如果你不想在工具链上花费太多精力，它是最平衡的选择。

eslint-config-standard 就像一件印有社区 Logo 的 T 恤 👕——鲜明且有归属感，适合认同其文化的团队。但一旦你想修改它的样式（比如加分号），就会发现它并不如想象中那样灵活。

最终建议：不要盲目追随名气。如果你的项目重度依赖 React 且团队规模大，Airbnb 的严格是值得的；如果你追求开发体验和配置简单，Google 或 Standard 更能让你专注于代码本身。记住，最好的规范是团队愿意遵守的规范。