Airbnb 是一家世界知名的在线房屋出租平台，该公司在前端技术方面也有着非常高的要求。为了保证代码的规范性和可维护性，Airbnb 开发了一套团队规范，其中包括 ESLint 配置。本文将介绍 Airbnb 的 ESLint 配置，带你了解该配置的详细内容，以及如何将其应用到你的项目中。
为什么需要 ESLint 配置
在 Web 开发过程中，有很多问题会影响代码质量和可维护性，例如：命名不规范、变量重复定义、使用未声明的变量、未使用的变量和函数等等。为了解决这些问题，我们需要一个静态代码分析工具，这就是 ESLint 的作用。
ESLint 是一个开源的 JavaScript 静态分析工具，使用它可以对 JavaScript 代码进行分析，找出代码中的问题，并给出相应的警告和错误提示。借助 ESLint 的核心官方规则库，我们可以在代码编写阶段及时发现问题。
如何使用 Airbnb 的 ESLint 配置
Airbnb 的 ESLint 配置是在官方的 ESLint 规则基础上进行的扩展和自定义，旨在使代码更加规范化。如果你想应用 Airbnb 的 ESLint 配置到自己的项目中，可以按照以下步骤进行配置：
- 安装 ESLint 和 Airbnb 配置
我们可以通过 npm 命令安装 ESLint 和 Airbnb 配置，如下所示：
npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D
其中：
eslint是 ESLint 的核心包。eslint-config-airbnb是 Airbnb 的 ESLint 配置。eslint-plugin-import是用于验证 import/export 语法。eslint-plugin-jsx-a11y是用于验证 JSX 代码的可访问性。eslint-plugin-react是用于验证 React 的规则。
- 创建 .eslintrc 配置文件
在项目根目录下创建一个 .eslintrc 的配置文件，将以下内容复制到 .eslintrc 文件中：
{
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"jest": true
}
}其中：
extends指定了要使用的扩展规则，这里选择了 Airbnb 的规则。env是用于指定环境的，这里指定了浏览器、Node.js 和 Jest 等环境。
- 添加 ESLint 命令到 package.json
为了方便执行 ESLint 校验，我们可以在 package.json 中添加一个 lint 命令，如下所示：
{
"scripts": {
"lint": "eslint ."
}
}现在，你可以使用以下命令来执行代码校验：
npm run lint
ESLint 规则
Airbnb 的 ESLint 配置包含了大量规则，这里只列举了其中一部分，供参考。
命名规范
- 变量名和函数名应该小写，使用下划线分隔单词。
- 类名应该使用帕斯卡命名法（PascalCase）。
- 常量应该全部大写。
- 文件名中使用帕斯卡命名法（PascalCase）。
语法风格
- 使用单引号（'），而非双引号（'）。
- 使用模板字符串（template string）来进行字符串拼接。
- 禁止出现未使用过的变量和函数。
- 禁止在循环中使用异步函数。
- 禁止在非必要时使用括号包裹箭头函数。
- 禁止在语句末尾使用分号（;）。
React 规则
- 组件名称使用帕斯卡命名法（PascalCase）。
- 禁止在组件内部定义重复的 props。
- 禁止在 JSX 属性中使用箭头函数。
- 禁止在 JSX 属性中使用字符串字面量作为值。
- 禁止在 JSX 标签内部使用注释。
- 禁止在没有 children 的标签中使用自闭合标签。
总结
Airbnb 的 ESLint 配置非常严格，但是它可以帮助团队保证代码质量和可维护性。在应用 Airbnb 的 ESLint 配置时，我们需要仔细阅读配置文件中的规则，了解每条规则的意义和作用。同时，我们也可以根据自己项目的实际情况进行一些定制化的配置，以满足不同的需求。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- ---- -- -- -
----- ----------- - -- -- -
------------------- -----------
--
------ -
---- --------------------- ------------- -------------
----- ---
------
--
--
----------------- - -
----- ----------------------------
--
------ ------- --------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647061a0968c7c53b0e81b3d