本文档将解释如何根据您项目的特定需求自定义 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
适用于希望严格执行仅空格规则,同时将其他规则保持为警告的项目。
这对于以下情况很有用
来源: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
来源:linters/SublimeLinter/SublimeLinter.sublime-settings15-72
对于大型项目,将自定义规则组织到单独的文件中通常很有帮助
示例实现(在 .eslintrc.js 中)
根据文件模式使用不同的规则集
示例
来源:packages/eslint-config-airbnb/README.md81-87 packages/eslint-config-airbnb-base/README.md97-103
npm run lint 来验证您的自定义配置是否按预期工作对于具有许多样式问题的现有项目,请考虑分阶段进行
airbnb-base/whitespace 或 airbnb/whitespace 开始这有助于团队适应风格指南,而不会被 linting 错误淹没。
来源:packages/eslint-config-airbnb/README.md81-87 packages/eslint-config-airbnb-base/README.md97-103
许多项目需要将 Airbnb 的风格指南与其他工具或框架集成。以下是一些常见的扩展
| 技术 | 推荐的扩展 | 备注 |
|---|---|---|
| TypeScript | @typescript-eslint/eslint-plugin | 需要解析器配置 |
| Jest | eslint-plugin-jest | 在 env 中设置 jest: true |
| Vue.js | eslint-plugin-vue | 扩展 plugin:vue/recommended |
| Prettier | eslint-config-prettier | 禁用与 Prettier 冲突的 ESLint 规则 |
| Next.js | eslint-config-next | 为 Next.js 项目量身定制 |
请记住,在扩展多个配置时,数组中的最后一个扩展在有冲突的规则时具有优先权。