集成与使用

相关源文件

• linters/.eslintrc
• linters/SublimeLinter/SublimeLinter.sublime-settings
• packages/eslint-config-airbnb-base/README.md
• packages/eslint-config-airbnb/README.md

本页面概述了如何在您的项目中集成和使用 Airbnb JavaScript 风格指南及其关联的 ESLint 配置。它涵盖了基本的集成模式和一般的用法指南。有关详细的安装说明，请参阅 安装与设置。有关配置自定义的信息，请参阅 自定义。有关与 IDE 和其他开发工具的特定集成，请参阅 与开发工具集成。

概述

Airbnb JavaScript 风格指南可以通过其 ESLint 配置集成到您的项目中，从而实现自动化的代码风格检查和强制执行。有两个主要的配置包可用：

• eslint-config-airbnb：包含 JavaScript、ES6+、React、JSX 和可访问性的规则
• eslint-config-airbnb-base：基础 JavaScript 规则，不包含 React 特定的规则

配置层级图

来源： packages/eslint-config-airbnb/README.md9-13 packages/eslint-config-airbnb-base/README.md13-14

可用配置

核心配置

1. eslint-config-airbnb

   • 包含 ES6+ 和 React 规则的默认配置
   • 需要：eslint、eslint-plugin-import、eslint-plugin-react、eslint-plugin-react-hooks 和 eslint-plugin-jsx-a11y
   • 用法：将 "extends": "airbnb" 添加到您的 .eslintrc 文件中

2. eslint-config-airbnb-base

   • 不含 React 的 JavaScript 的基础配置
   • 需要：eslint 和 eslint-plugin-import
   • 用法：将 "extends": "airbnb-base" 添加到您的 .eslintrc 文件中

来源： packages/eslint-config-airbnb/README.md11-15 packages/eslint-config-airbnb-base/README.md15-18

专用配置

1. eslint-config-airbnb/hooks

   • 启用 React Hooks 语 lint 规则
   • 用法：将 "extends": ["airbnb", "airbnb/hooks"] 添加到您的 .eslintrc 文件中

2. eslint-config-airbnb/whitespace

   • 仅针对空格规则报告错误，并将所有其他规则设置为警告
   • 用法：将 "extends": ["airbnb", "airbnb/whitespace"] 添加到您的 .eslintrc 文件中

3. eslint-config-airbnb-base/legacy

   • 适用于 ES5 及更早版本
   • 用法：将 "extends": "airbnb-base/legacy" 添加到您的 .eslintrc 文件中

4. eslint-config-airbnb-base/whitespace

   • 仅针对 JavaScript 的空格规则报告错误
   • 用法：将 "extends": ["airbnb-base", "airbnb-base/whitespace"] 添加到您的 .eslintrc 文件中

来源： packages/eslint-config-airbnb/README.md61-68 packages/eslint-config-airbnb-base/README.md65-68 packages/eslint-config-airbnb-base/README.md93-95

基本集成流程

集成流程图

来源： packages/eslint-config-airbnb/README.md17-59 packages/eslint-config-airbnb-base/README.md19-63 linters/.eslintrc1-5

安装与基本设置

安装过程包括添加相应的配置包及其对等依赖项。这是一个基本示例：

1. 安装配置及其依赖项

2. 创建或更新您的 .eslintrc 文件

   或

有关详细说明（包括不同的包管理器和环境），请参阅 安装与设置。

来源： packages/eslint-config-airbnb/README.md17-59 packages/eslint-config-airbnb-base/README.md19-63 linters/.eslintrc1-5

ESLint 配置结构

下图说明了 Airbnb ESLint 配置的内部结构

配置组件图

来源： packages/eslint-config-airbnb/README.md11-79 packages/eslint-config-airbnb-base/README.md15-95

IDE 和编辑器集成

Airbnb 风格指南和 ESLint 配置可以与各种代码编辑器和 IDE 集成，以获得实时 linting 反馈。常见的集成方法包括：

Sublime Text 集成

Sublime Text 用户可以通过 SublimeLinter 包进行集成

1. 安装 SublimeLinter 扩展
2. 配置 SublimeLinter 设置以使用 Airbnb 规则

Sublime Text 配置示例:

有关编辑器特定集成的详细说明，请参阅 与开发工具集成。

来源： linters/SublimeLinter/SublimeLinter.sublime-settings1-73

使用模式

下表总结了常见的集成场景和相应的配置：

项目类型	推荐配置	集成命令	.eslintrc 扩展
React + ES6+	eslint-config-airbnb	npx install-peerdeps --dev eslint-config-airbnb	"extends": "airbnb"
React + Hooks	带 Hooks 的 eslint-config-airbnb	npx install-peerdeps --dev eslint-config-airbnb	"extends": ["airbnb", "airbnb/hooks"]
JavaScript ES6+ (无 React)	eslint-config-airbnb-base	npx install-peerdeps --dev eslint-config-airbnb-base	"extends": "airbnb-base"
遗留 JavaScript (ES5)	eslint-config-airbnb-base/legacy	npx install-peerdeps --dev eslint-config-airbnb-base	"extends": "airbnb-base/legacy"
仅空格规则	--whitespace 变体	依赖于基础配置	添加相应的 whitespace 扩展

来源： packages/eslint-config-airbnb/README.md11-68 packages/eslint-config-airbnb-base/README.md15-95

与构建系统和 CI/CD 集成

Airbnb ESLint 配置可以集成到您的构建系统和持续集成流水线中，以在您的团队中强制执行代码风格的一致性。

CI/CD 集成流程

有关与 CI/CD 工具集成的详细说明，请参阅 与开发工具集成。

来源： packages/eslint-config-airbnb/README.md83-87 packages/eslint-config-airbnb-base/README.md97-103

结论

Airbnb JavaScript 风格指南提供了灵活的 ESLint 配置，可以集成到各种项目类型和开发工作流中。核心包 eslint-config-airbnb 和 eslint-config-airbnb-base 及其专门的变体，提供了全面的规则集，有助于保持代码质量和一致性。

有关详细的设置说明，请参阅 安装与设置。有关根据项目特定需求自定义配置的信息，请参阅 自定义。有关与开发工具集成的指南，请参阅 与开发工具集成。