Airbnb JavaScript 风格指南介绍

相关源文件

• README.md
• css-in-javascript/README.md
• linters/.markdownlint.json
• package.json

目的与范围

Airbnb JavaScript 风格指南是一套全面的 JavaScript 编码标准，提倡一种一致、可读且可维护的 JavaScript 编码方法。它为开发者提供了一份权威指南，使他们能够以符合现代最佳实践的方式编写 JavaScript 代码。该指南在 Airbnb 内部得到了广泛应用，并已被全球众多组织和项目采纳为 JavaScript 代码质量的标准。

有关 ESLint 配置的特定信息，请参阅 ESLint 配置。有关 React 特定指南，请参阅 React/JSX 风格指南。

概述

Airbnb JavaScript 风格指南不仅仅是一份文档，它是一个完整的相关风格指南、ESLint 配置和工具系统，旨在强制执行 JavaScript 项目中的一致代码质量。

系统架构

图示：Airbnb JavaScript 风格指南系统的核心组件

来源：README.md13-19

风格指南系统包括

1. 风格指南（文档）:

   • JavaScript 风格指南：涵盖 JavaScript 所有方面的核心风格指南
   • React 风格指南：React 和 JSX 的特定指南
   • CSS-in-JavaScript 风格指南：组件样式指南
   • ES5 风格指南：ES5 的旧版指南（现已弃用）

2. ESLint 配置:

   • eslint-config-airbnb-base：核心 JavaScript 规则
   • eslint-config-airbnb：扩展了基础配置，增加了 React 特定规则

这种双重方法允许提供人类可读的指南，并通过 linting 工具实现自动化强制执行。

核心理念

Airbnb JavaScript 风格指南秉承“一种大部分合理的 JavaScript 方法”的理念。这意味着尽管该指南内容全面且有明确的观点，但它基于实际考虑，而非理论上的理想。

图示：Airbnb JavaScript 风格指南的指导原则

来源：README.md3-5 README.md111-115 README.md596-598

关键假设和要求

• 该指南假设使用 Babel 进行转译
• 建议使用 babel-preset-airbnb 或同等配置
• 假设已安装适当的 polyfills（例如 airbnb-browser-shims）

来源：README.md5

JavaScript 风格指南结构

主要的 JavaScript 风格指南分为 29 个部分，每个部分都针对 JavaScript 编码的特定方面。这些部分共同涵盖了从基本语法到高级模式的所有内容。

表：JavaScript 风格指南的核心部分

类别	章节
类型与变量	类型、引用、变量、提升
数据结构	对象、数组、解构、属性
函数	函数、箭头函数、构造函数
类与模块	类与构造函数、模块
高级特性	迭代器和生成器
语法与格式	字符串、空格、逗号、分号
编码模式	比较运算符与相等性、块、控制语句
文档与风格	注释、命名约定
浏览器与兼容性	jQuery、ECMAScript 5 兼容性、标准库
性能与测试	性能、测试

来源：README.md21-61

每个部分都遵循一个一致的模式，提供规则：

• 一个唯一的标识符（例如 1.1)
• 演示“错误”和“正确”实践的代码示例
• 解释某些方法为何更优的理由

规则结构示例

[Rule Number] Rule statement. eslint: [Related ESLint rule]

> Why? Explanation of the rationale behind the rule.

// bad
// Example of anti-pattern

// good
// Example of recommended pattern

来源：README.md65-88 README.md111-124

ESLint 配置系统

该风格指南通过 ESLint 配置来强制执行，这些配置按层次结构组织，以便于灵活采纳。

图示：ESLint 配置架构

来源：System diagrams provided in prompt

ESLint 配置系统将风格指南规则实现为可强制执行的检查。大多数规则都设置为“error”级别，这表明 Airbnb 致力于严格的代码质量标准。

使用和集成

Airbnb JavaScript 风格指南可以通过多种方式使用：

1. 作为参考文档：开发者可以手动阅读和遵循指南。
2. 作为 ESLint 配置：项目可以安装和扩展 ESLint 配置。
3. 作为 CI/CD 流水线的一部分：ESLint 配置可以集成到自动化测试中。

要使用 ESLint 配置

然后，在您的 .eslintrc 文件中扩展配置

或者，对于 React 项目

来源：package.json1-46

相关项目

JavaScript 风格指南是 Airbnb 维护的一系列风格指南的一部分

• CSS & Sass 风格指南
• Ruby 风格指南

对于 CSS in JavaScript，该指南涵盖了命名约定、组织实践和针对基于组件的架构量身定制的主题方法。

来源：css-in-javascript/README.md1-12 README.md17-19

结论

Airbnb JavaScript 风格指南提供了一个全面的框架，用于编写一致、可维护的 JavaScript 代码。通过将人类可读的指南与自动化的 ESLint 配置相结合，它提供了指导和强制执行。该指南在行业内的广泛采用证明了其在现代 JavaScript 开发中的有效性和相关性。