菜单

定制

相关源文件

本文档将解释如何根据您项目的特定需求自定义 Airbnb 的 JavaScript 风格指南 ESLint 配置。我们将涵盖扩展基础配置、覆盖特定规则、使用专门的配置以及创建项目特定的自定义。有关初始安装和设置的信息,请参阅 安装和设置,有关与开发工具集成的信息,请参阅 与开发工具集成

自定义选项概述

Airbnb 的 JavaScript 风格指南提供了多种 ESLint 配置,可以根据您项目的要求进行自定义。这些配置设计为可扩展的,允许您根据需要覆盖规则或添加其他规则。

可用配置入口点

来源:packages/eslint-config-airbnb/README.md11-67 packages/eslint-config-airbnb-base/README.md13-95

基础配置自定义

自定义 Airbnb 配置最简单的方法是在项目的 .eslintrc 文件中扩展它们并添加您自己的规则覆盖。

扩展基础配置

基础扩展示例

来源:linters/.eslintrc1-5 packages/eslint-config-airbnb/README.md59 packages/eslint-config-airbnb-base/README.md63

使用专门的配置

Airbnb 为不同的用例提供了专门的配置,可以单独使用或组合使用。

组合多个配置

组合配置示例

来源:packages/eslint-config-airbnb/README.md61-63 packages/eslint-config-airbnb-base/README.md89

仅限空格的配置

适用于希望严格执行仅空格规则,同时将其他规则保持为警告的项目。

这对于以下情况很有用

  • 向 Airbnb 风格过渡的遗留代码库
  • 在样式问题很多的现有项目中,希望首先关注空格的项目

来源:packages/eslint-config-airbnb/README.md65-67 packages/eslint-config-airbnb-base/README.md93-95

规则自定义策略

规则覆盖层级

自定义规则时,请考虑以下常见模式

自定义类型用例示例
禁用规则当规则不符合您的项目需求时"no-console": "off"
更改规则严重性将非关键规则设置为警告而不是错误"max-len": "warn"
修改规则选项保留规则但使用不同的参数"indent": ["error", 4]
环境特定规则测试文件与源代码的不同规则使用 overrides 部分和 files 模式

来源:packages/eslint-config-airbnb/README.md77-79

常见自定义示例

添加对其他环境的支持

调整 TypeScript 项目的规则

来源:linters/SublimeLinter/SublimeLinter.sublime-settings15-72

高级配置技术

规则集组织模式

对于大型项目,将自定义规则组织到单独的文件中通常很有帮助

示例实现(在 .eslintrc.js 中)

带有覆盖的文件特定配置

根据文件模式使用不同的规则集

示例

来源:packages/eslint-config-airbnb/README.md81-87 packages/eslint-config-airbnb-base/README.md97-103

自定义的最佳实践

关于规则自定义的规则

  1. 记录规则覆盖:添加注释解释为什么修改规则
  2. 有选择性:仅当有充分理由时才覆盖规则
  3. 使用一致的模式:统一应用类似的自定义
  4. 利用专门的配置:在编写自定义规则之前,使用 Airbnb 的专门配置
  5. 测试您的配置:使用 npm run lint 来验证您的自定义配置是否按预期工作

渐进式采用策略

对于具有许多样式问题的现有项目,请考虑分阶段进行

  1. airbnb-base/whitespaceairbnb/whitespace 开始
  2. 逐渐添加基本规则
  3. 最终采用完整的配置

这有助于团队适应风格指南,而不会被 linting 错误淹没。

来源:packages/eslint-config-airbnb/README.md81-87 packages/eslint-config-airbnb-base/README.md97-103

常见兼容性扩展

许多项目需要将 Airbnb 的风格指南与其他工具或框架集成。以下是一些常见的扩展

技术推荐的扩展备注
TypeScript@typescript-eslint/eslint-plugin需要解析器配置
Jesteslint-plugin-jest在 env 中设置 jest: true
Vue.jseslint-plugin-vue扩展 plugin:vue/recommended
Prettiereslint-config-prettier禁用与 Prettier 冲突的 ESLint 规则
Next.jseslint-config-next为 Next.js 项目量身定制

请记住,在扩展多个配置时,数组中的最后一个扩展在有冲突的规则时具有优先权。