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

airbnb/javascript

菜单

ESLint 规则类别

相关源文件

目的和概述

本文档全面概述了 Airbnb JavaScript 风格指南中使用的 ESLint 规则类别。它解释了规则的组织方式、每个类别的目的以及它们如何协同工作，以在 JavaScript 和 React 应用程序中强制执行一致的代码质量和风格。有关特定 ESLint 配置的信息，请参阅ESLint 配置。

Airbnb JavaScript 风格指南中的 ESLint 规则类别被组织成逻辑组，针对纯 JavaScript 和 React 开发中代码质量、风格和最佳实践的不同方面。

规则类别组织

下图说明了 Airbnb JavaScript 风格指南中 ESLint 规则类别的层次结构组织。

来源：packages/eslint-config-airbnb/rules/react.js6-16 packages/eslint-config-airbnb-base/rules/style.js1-4

按关注点分类的规则

规则也可以按其解决的关注点类型进行分类。

来源：packages/eslint-config-airbnb/rules/react.js18-420 packages/eslint-config-airbnb-base/rules/style.js3-532

基础 JavaScript 规则类别

样式规则

样式规则强制执行一致的代码格式和样式约定。它们侧重于代码的美学方面，而不是功能。

示例包括

  • 缩进（2 个空格）
  • 引号（单引号）
  • 分号（必需）
  • 运算符和语句之间的空格
  • 行长限制
  • 逗号样式和用法

来源：packages/eslint-config-airbnb-base/rules/style.js3-535

最佳实践规则

这些规则强制执行有助于防止错误并促进可维护代码的编码实践。

示例包括

  • 禁止使用 eval()
  • 强制在回调中进行错误处理
  • 禁止修改函数参数
  • 要求在使用 parseInt() 时提供 radix 参数
  • 避免不必要的功能绑定

来源：从规则组织推断

ES6 规则

专门处理 ECMAScript 2015 (ES6) 特性和语法的规则。

示例包括

  • 对于未重新赋值的变量，强制使用 const 而不是 let
  • 优先使用箭头函数作为回调
  • 强制正确使用模板文字
  • 类语法和继承规则
  • 解构赋值偏好

来源：从规则组织推断

导入规则

用于管理模块导入和导出的规则，以确保一致性并防止错误。

示例包括

  • 禁止重复导入
  • 禁止不必要的路径段
  • 禁止未解析的导入
  • 强制执行一致的导入顺序
  • 防止在生产代码中从 devDependencies 导入

来源：从规则组织推断

错误预防规则

专为捕获常见编程错误或易出错模式而设计的规则。

示例包括

  • 禁止使用未使用的变量
  • 禁止使用未声明的变量
  • 禁止使用无法到达的代码
  • 禁止在条件中使用赋值
  • 禁止在对象字面量中使用重复的键

来源：从规则组织推断

变量和作用域规则

管理变量声明、作用域和使用模式的规则。

示例包括

  • 禁止变量覆盖
  • 禁止在使用变量前使用它们
  • 强制声明时初始化
  • 函数和变量提升规则
  • 全局变量使用控制

来源：从规则组织推断

React 特定规则类别

React 核心规则

这些规则强制执行特定于 React 组件开发的最佳实践。

示例包括

  • 正确的组件生命周期方法排序
  • 列表中的正确 key 属性用法
  • PropType 验证要求
  • 防止直接修改状态
  • 强制执行组件方法命名约定

来源：packages/eslint-config-airbnb/rules/react.js247-297

JSX 样式规则

用于在 JSX 中强制执行一致格式和样式的规则。

示例包括

  • JSX 缩进（2 个空格）
  • 强制 JSX 属性使用双引号
  • 没有子组件的组件使用自闭合标签
  • JSX 表达式中的一致空格
  • 多行 JSX 元素规则

来源：packages/eslint-config-airbnb/rules/react.js25-26 packages/eslint-config-airbnb/rules/react.js77-82 packages/eslint-config-airbnb/rules/react.js244-245 packages/eslint-config-airbnb/rules/react.js320-321

React Hooks 规则

用于强制执行 React Hooks API 的 Hooks 规则。

示例包括

  • 仅在顶层调用 Hooks
  • 仅从 React 函数调用 Hooks
  • 强制在 useEffect 中正确使用依赖项数组
  • 防止 Hooks 中出现不必要的依赖项
  • 确保 useState 中状态值和设置器的命名正确

来源：packages/eslint-config-airbnb/rules/react.js572-574

React 可访问性（A11y）规则

专注于确保 React 应用程序对残障用户可访问的规则。

示例包括

  • 要求为图片提供 alt 文本
  • 强制使用有效的 ARIA 属性
  • 防止交互式元素缺少键盘处理程序
  • 确保正确的标题结构
  • 强制使用语义化 HTML

来源：从规则组织推断

规则严重性级别

ESLint 配置中的每条规则都可以设置为三个严重性级别之一：

严重性描述效果
“error”最高严重性导致构建中断/linting 失败
“warn”中等严重性显示警告，但不导致 linting 失败
“off”已禁用不强制执行规则

Airbnb 风格指南中的大多数规则都设置为“error”级别，这表明其对代码质量的严格要求。

来源：packages/eslint-config-airbnb/rules/react.js176 packages/eslint-config-airbnb/rules/react.js58 packages/eslint-config-airbnb/rules/react.js120

规则配置模式

常见配置模式

许多规则遵循相似的配置模式。

  1. 简单的布尔值规则：仅启用或禁用的规则。

  2. 带选项的规则：规则包含一个数组，第一个元素是严重性，后续元素是选项。

  3. 带复杂选项的规则：规则具有对象配置。

来源：packages/eslint-config-airbnb/rules/react.js172 packages/eslint-config-airbnb/rules/react.js321 packages/eslint-config-airbnb/rules/react.js62-66

覆盖 React 的基础规则

一些 React 规则扩展或覆盖了基础 JavaScript 规则，以适应 React 的特定模式。

来源：packages/eslint-config-airbnb/rules/react.js1-22

规则类别集成

下图显示了规则类别如何集成到整体 ESLint 配置结构中。

来源：packages/eslint-config-airbnb/rules/react.js1-6

规则类别优势

Airbnb JavaScript 风格指南中 ESLint 规则的分类提供了几个优势：

  1. 逻辑组织：规则按其目的和所解决的代码方面进行分组。
  2. 模块化采纳：团队可以根据需要选择采用特定的规则类别。
  3. 更易于维护：相关规则放在一起，使更新和完善更简单。
  4. 更好的文档：类别帮助开发人员理解规则背后的目的。
  5. 选择性自定义：团队可以覆盖整个类别，同时保持其他类别不变。

按频率划分的常见规则类别

规则按类别的分布（从配置文件近似估算）。

类别近似规则计数描述
React/JSX70+React 和 JSX 特定规则
风格50+代码格式和样式约定
最佳实践40+通用 JavaScript 最佳实践
ES620+现代 JavaScript 特性
导入15+模块导入/导出模式
错误（Errors）15+错误预防
变量10+变量声明和使用
A11y20+可访问性指南

来源：packages/eslint-config-airbnb/rules/react.js18-602 packages/eslint-config-airbnb-base/rules/style.js2-533

规则类别与风格指南的关系

ESLint 规则类别直接实现并强制执行 Airbnb JavaScript 风格指南中描述的指南。有关特定规则类别的更多详细信息，请参阅