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

airbnb/javascript

菜单

代码风格和格式化

相关源文件

目的与范围

本文档概述了 Airbnb JavaScript 风格指南中使用的代码风格和格式约定。它涵盖了空白符使用、标点符号（逗号、分号）、代码块、注释以及其他提高代码可读性和可维护性的风格元素。有关函数、类或模块等特定 JavaScript 语言功能的信息，请参阅JavaScript 风格指南。

本文档中的风格约定通过 eslint-config-airbnb-base 包中的 ESLint 规则强制执行。

风格类别概览

Airbnb JavaScript 风格指南将风格和格式规则组织成几个类别

来源：README.md2561-3060 packages/eslint-config-airbnb-base/rules/style.js1-534

空白字符

一致的空白符使用对于代码可读性至关重要。风格指南对空白符的各个方面都有具体规定。

缩进和行长度

  • 使用软制表符（空格）进行 2 空格缩进
  • 最大行长度：100 个字符
  • 避免行尾有多余空格
  • 文件末尾使用单个换行符

来源：README.md2564-2581 packages/eslint-config-airbnb-base/rules/style.js123-147 packages/eslint-config-airbnb-base/rules/style.js205-212

间距规则

下表总结了关键的间距规则

上下文规则示例
区块开括号前有 1 个空格function test() {
函数括号匿名函数后有空格，命名函数后无空格function () {} 对比 function foo() {}
控制语句括号前有 1 个空格if (condition) {
运算符运算符周围有空格const x = y + 5;
对象花括号内部有空格{ foo: 'bar' }
数组方括号内部无空格[1, 2, 3]
括号内部无空格if (condition)
注释// 或 /* 后有空格// comment

来源：README.md2582-2611 README.md2635-2645 packages/eslint-config-airbnb-base/rules/style.js480-492

换行

该指南为方法链、多行语句和空行提供了具体规则

  • 对于超过 2 个方法的方法链，使用前导点（Leading Dots）
  • 代码块后和语句前留一个空行
  • 代码块内不要用空行填充
  • 不允许连续多个空行

来源：README.md2673-2717 README.md2721-2775 packages/eslint-config-airbnb-base/rules/style.js402-414 packages/eslint-config-airbnb-base/rules/style.js322

标点和语法

逗号

逗号风格影响可读性并确保清晰的 Git 差异。

  • 切勿使用前导逗号
  • 多行数组、对象、导入/导出和函数参数使用尾随逗号
  • 逗号前避免空格，逗号后需要空格

来源：README.md3062-3143 packages/eslint-config-airbnb-base/rules/style.js42-48 packages/eslint-config-airbnb-base/rules/style.js51

分号

需要使用分号以防止 ASI (自动分号插入) 问题

  • 始终在语句末尾使用分号
  • 确保分号周围有适当的间距
  • 分号应在行末（而不是下一行开头）

来源：README.md3061-3143 packages/eslint-config-airbnb-base/rules/style.js464-471

代码块和花括号

正确的代码块格式可以提高代码清晰度

  • 所有多行代码块都使用花括号
  • 对于带有 if 语句且包含 else 的情况，将 else 放在闭花括号的同一行
  • 当 if 语句包含 return 时，避免不必要的 else 代码块
  • 遵循“1TBS”（One True Brace Style）风格——开花括号与语句在同一行

来源：README.md2236-2346 packages/eslint-config-airbnb-base/rules/style.js21

命名约定

有意义、一致的命名可以提高代码可维护性。Airbnb 风格指南涵盖了几种命名约定

附加命名指南

  • 变量、函数和函数参数使用 camelCase（驼峰命名法）
  • 类和 React 组件使用 PascalCase（帕斯卡命名法）
  • 避免使用单字母名称（计数器或迭代器除外）
  • 避免使用下划线前缀（由 ESLint 的 no-underscore-dangle 规则强制执行）

来源：README.md45 packages/eslint-config-airbnb-base/rules/style.js24 packages/eslint-config-airbnb-base/rules/style.js254-259 packages/eslint-config-airbnb-base/rules/style.js378-383

代码组织和注释

注释

适当的注释可以提高代码的可读性和可维护性

  • 多行注释使用 /** ... */
  • 单行注释使用 //
  • 注释放置在其描述对象上方的新行
  • 所有注释都以一个空格开头
  • 使用 // FIXME: 标记问题
  • 使用 // TODO: 标记待办事项/解决方案

来源：README.md2422-2558 packages/eslint-config-airbnb-base/rules/style.js507-517

ESLint 配置

风格指南通过 ESLint 规则强制执行，这些规则主要在 eslint-config-airbnb-base/rules/style.js 文件中定义。

主要的风格相关 ESLint 规则类别

类别目的示例规则
空白字符控制间距和缩进indent, linebreak-style, max-len
逗号强制逗号风格和间距comma-dangle, comma-spacing
分号确保正确使用分号semi, semi-spacing
区块控制代码块格式brace-style, nonblock-statement-body-position
命名强制命名约定camelcase, new-cap, no-underscore-dangle
注释控制注释格式spaced-comment, capitalized-comments

来源：packages/eslint-config-airbnb-base/rules/style.js1-534

总结

一致的代码风格和格式是 Airbnb JavaScript 风格指南的关键组成部分。这些指南确保代码具有清晰的视觉结构，易于阅读和维护。遵循这些约定可以使

  1. 代码在项目和团队成员之间更具一致性
  2. 视觉模式使代码更易于扫视和理解
  3. 最大限度地减少了诸如缩进计数错误或代码块理解偏差等常见问题
  4. 版本控制差异变得更清晰、更有意义

这些风格约定通过 ESLint 配置实现，允许通过开发工具和 CI/CD 流水线自动强制执行风格指南。