在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

airbnb/javascript

菜单

JavaScript 风格指南

相关源文件

JavaScript 风格指南是 Airbnb JavaScript 编码标准的で核心文档，为编写清晰、一致且可维护的 JavaScript 代码提供了全面的指导。本文档通过定义语法、格式和编程实践的约定，为跨项目的代码质量设定了基准。

有关 React 特定指南，请参阅 React/JSX 风格指南，有关使用 CSS-in-JavaScript 的最佳样式实践，请参阅 CSS-in-JavaScript。有关强制执行这些标准的 ESLint 配置的信息，请参阅 ESLint 配置。

目的与范围

JavaScript 风格指南是 Airbnb 前端代码质量策略的基础，其目标如下：

  • 为 Airbnb 所有项目建立一致的 JavaScript 代码模式
  • 提高代码的可读性和可维护性
  • 防止常见错误和陷阱
  • 推广现代 JavaScript 最佳实践（ES6+ 功能）
  • 作为代码审查和自动化 Linting 的参考

本指南旨在实用且直接可应用，每个规则都附有示例，展示了推荐和不推荐的模式。

来源： README.md3-5

风格指南架构

JavaScript 风格指南是 Airbnb 风格指南和工具更大生态系统的一部分，这些指南和工具协同工作以强制执行 Airbnb 的编码标准。

风格指南关系

来源： README.md15-19

核心结构

该风格指南分为 30 多个独立部分，每个部分都侧重于 JavaScript 开发的特定方面

来源： README.md21-61

核心原则

JavaScript 风格指南围绕几个基本原则构建，这些原则指导其建议。

  1. 不变性和纯函数 - 偏好不变数据和纯函数，以减少副作用并使代码更可预测

  2. 现代 JavaScript 功能 - 采用 ES6+ 功能，如箭头函数、类、解构和模块

  3. 显式优于隐式 - 倾向于清晰表达其意图的代码，而不是依赖隐式行为

  4. 一致性 - 在整个代码库中保持一致的模式

  5. 可读性 - 优先考虑人类可读性，而不是简洁性或巧妙的优化

这些原则在风格指南的具体建议中随处可见。

来源： README.md63-108 README.md1478-1589

主要编码标准

变量和引用

该风格指南为变量声明建立了清晰的标准

  • 默认情况下，所有引用都使用 const
  • 仅当需要重新赋值时，才使用 let
  • 切勿使用 var
  • 先组合所有 const 声明，然后组合所有 let 声明
  • 在需要变量的地方，在最小的作用域内声明变量

来源： README.md109-163 README.md1640-1870

对象和数组

该指南确立了处理对象和数组的模式

  • 使用字面量语法进行创建（{} 和 []）
  • 使用对象方法和属性值简写
  • 在创建具有动态键的对象时，使用计算属性名
  • 使用数组展开 ... 来复制数组
  • 使用对象 rest/spread 进行浅拷贝和属性省略

对象和数组被视为通过引用传递的复杂类型，因此它们的处理需要小心，以防止意外的副作用。

来源： README.md164-507

函数和箭头函数

主要建议包括

  • 使用命名函数表达式而不是函数声明
  • 对匿名函数（尤其是回调）使用箭头函数
  • 省略花括号，对单表达式箭头函数使用隐式返回
  • 始终在箭头函数参数周围加上括号
  • 切勿修改或重新分配函数参数

来源： README.md660-1105

类和模块

面向面向对象和模块化编程

  • 使用 class 语法进行面向对象编程
  • 使用 extends 进行继承
  • 使用 ES 模块（import/export）而不是其他模块系统
  • 默认导出首选用于单个导出
  • 避免通配符导入

来源： README.md1109-1476

代码格式化标准

格式化规则可确保代码外观的一致性

  • 使用 2 个空格进行缩进
  • 在左花括号前放置 1 个空格
  • 变量和函数使用 camelCase
  • 类和构造函数使用 PascalCase
  • 最大行长度为 100 个字符
  • 使用分号
  • 字符串使用单引号
  • 多行对象和数组字面量使用尾随逗号

这些格式化规则通过 ESLint 配置强制执行。

来源： README.md2561-3060 README.md3061-3195 README.md3196-3244 README.md3244-3292

通过 ESLint 进行强制执行

JavaScript 风格指南通过两个主要 ESLint 配置强制执行

  1. eslint-config-airbnb-base - 核心 JavaScript 规则
  2. eslint-config-airbnb - 扩展了 base，增加了 React 特定规则

ESLint 配置层次结构

ESLint 配置将风格指南的建议转化为可强制执行的规则，大多数规则设置为 error 级别以进行严格强制。

来源： README.md5-11

演进与贡献

JavaScript 风格指南并非一成不变，而是随着 JavaScript 语言和生态系统的发展而演进。它托管在 GitHub 上，开发者可以在此处

  • 提交 issue 以讨论特定规则
  • 通过 pull request 提出更改
  • Fork 该指南以进行团队特定的调整

该指南已被翻译成 14 种以上语言，并被 Airbnb 以外的许多组织采纳。

来源： README.md4030-4052 README.md3940-4029

采用指标

JavaScript 风格指南及其相关的 ESLint 配置已获得广泛采用

包月下载量
eslint-config-airbnb数百万
eslint-config-airbnb-base数百万

包括 React、Walmart 和 Target 在内的 40 多个主要公司和组织已公开采用该指南。

来源： README.md7-8 README.md3940-4029

JavaScript 风格指南还辅以其他资源

资源描述
React/JSX 风格指南React 组件开发指南
CSS-in-JavaScript使用 JavaScript 为 React 组件设置样式标准
ES5 风格指南ES5 环境的旧版指南
ESLint 配置风格指南规则的技术实现
JavaScript 风格指南指南创建风格指南的元指南

这些资源构成了 Airbnb JavaScript 代码质量的综合系统。

来源： README.md15-19 README.md4054-4056

实现策略

对于希望采用 JavaScript 风格指南的团队，推荐的方法是

  1. 安装相应的 ESLint 配置

    npm install eslint eslint-config-airbnb --save-dev

  2. 创建一个 .eslintrc 文件，该文件扩展了 Airbnb 配置

  3. 将 ESLint 集成到开发工作流程中

    • IDE/编辑器集成
    • 预提交钩子
    • CI/CD 管道检查

  4. 考虑对现有代码库采取分阶段方法

    • 从仅错误模式开始
    • 逐步修复违规行为
    • 最终强制执行所有规则

来源： README.md3874-3876

结论

JavaScript 风格指南是 Airbnb 前端开发实践的基石，它提供了一种全面实用的方法来编写一致、可读且可维护的 JavaScript 代码。通过其详细的建议和 ESLint 集成，它确立了高标准的代码质量，并已在行业内得到广泛采纳。