随着 React 技术的应用，代码质量与风格变得越来越重要。在我们进行代码开发的同时，我们也应该关注代码质量与风格，这样才能提升代码的可读性、可维护性以及代码的稳定性。本篇文章将介绍如何在 React 项目中使用 ESLint 配置 Airbnb JavaScript style，达到更好的代码风格及代码质量。
ESLint
ESLint 是一个易于扩展的 JavaScript 代码检查工具，它可以灵活配置检查规则，并可以通过插件进行扩展。ESLint 同时支持 ECMAScript 6 和 JSX。
我们在 React 项目中使用 ESLint，主要是为了遵循一套统一的代码风格，从而提升代码质量并减少错误的出现。而 ESLint 插件提供的检查规则，可以让我们在之前偏向主观的代码检查中，有一个更加客观的指引。
Airbnb JavaScript style
Airbnb JavaScript style 是 Airbnb 团队所开发的一套代码风格规范。这个规范的目标是提供一份统一的规范，便于开发人员可以更好的协作。这些规范从 ECMAScript 6 和 JSX 中的最佳实践中而来，并遵循的一些特定的规定。这里就不介绍 Airbnb JavaScript style 的每一条规范，可以参考官方文档。
配置 ESLint
我们可以直接在 React 项目中使用 ESLint，以检查并提高代码质量。ESLint 提供了很多不同的规则集，通过配置合适的规则集，我们就可以在我们的项目中使用这些规则，进而限制我们的代码风格。这里我们使用 Airbnb 的官方规则库 eslint-config-airbnb。
接下来我们按照以下步骤配置安装 ESLint 插件库：
- 在项目中安装 ESLint 插件库。
yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
- 在项目的根目录下增加一个
.eslintrc.yml配置文件。
-- -------------------- ---- -------
- ------ ----
----
-------- ----
---- ----
------------- ----
--------
- -----
- --------
- ------
--------
- ------
------- --------------
------
-----------------------------
- -
-----------------------------
- -这个配置文件定义了我们的实际规则库。Airbnb 规则库已经被合并到了我们的配置文件之中。我们同样针对特定问题设置了一些额外的规则。
在这个特定例子中，我们使用了 babel-eslint 解析器来编译 JavaScript 文件。同时，我们还忽略了两个错误：没有使用 .js 扩展名来保存 JSX 文件以及在默认情况下只能导出函数。
- 在项目的
package.json文件中增加一个lint命令。
{
"scripts": {
"lint": "eslint src/**/*.js"
}
}这个命令会用 ESLint 检查 src/ 目录下所有的 .js 文件。
- 运行
yarn lint命令就可以检查我们的代码是否符合 Airbnb 的规范。
如果我们的代码有错误，yarn lint 命令将会打印出相应的错误。
总结
本篇文章介绍了如何在 React 项目中使用 ESLint 配置 Airbnb JavaScript style。通过提供一套统一的规范文件，我们可以更好的遵循代码风格以及减少出现问题的几率。同时，这篇文章也介绍了 ESLint 的基本语法和 Airbnb 的 JavaScript style 规范，希望能对大家在前端开发领域有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b21544add4f0e0ffb4195e