在前一篇文章中，我们介绍了 ESLint 是什么以及如何安装和配置 ESLint。在本文中，我们将重点介绍如何通过 ESLint 自动校验 JavaScript 代码的代码风格并纠正代码风格不规范问题。
什么是 JavaScript 代码风格
JavaScript 代码风格是指编写代码时使用的代码格式、命名规范、注释规范等一系列规则和标准。这些规则和标准可能会因个人、组织、文件类型、项目、团队等不同而有所不同。
使用不规范的代码风格可能导致代码可读性差、可维护性差、出错率高等问题。为了保持代码风格的规范性，许多团队和项目都会定义自己的代码风格规范，并且强制执行规范。这就需要一些工具来协助快速、准确地验证和修复代码风格。
ESLint 如何校验代码风格
ESLint 是一个 JavaScript 代码检查工具，它可以通过配置文件来实现自定义规则的校验。ESLint 的校验规则包括以下几种类型：
- 语法规则：语法规则规定了代码是否符合 ECMAScript 标准的语法。
- 最佳实践规则：这些规则揭示了 JavaScript 中的一些最佳实践，可以帮助您避免一些常见的错误。
- 变量规则：这些规则定义了如何声明变量及其作用域。
- 代码风格规则：这些规则提供了一些提示，帮助您顺应您所在的团队的编码风格。
- 支持框架规则：ESLint 支持许多流行的框架，如 React、Vue、Angular 等，可以根据框架规则来校验代码。
当我们配置好 ESLint 后，它会在我们编写代码时对代码进行检查，并在检查到不规范的代码时发出警告或错误。这些警告或错误信息可以在命令行或编辑器中看到。
配置 JavaScript 代码风格校验规则
下面我们将介绍如何通过配置文件来定义 JavaScript 代码风格校验规则。
安装配置扩展
在安装好 ESLint 后，我们需要配置一些扩展来使用特定的代码风格规则，例如：
# 安装 AirBnB 扩展 npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev
配置文件
我们需要在根目录下创建 .eslintrc 文件，并定义需要校验的 JavaScript 文件类型、扩展以及使用到的校验规则等设置。以下是一个 .eslintrc 配置文件的示例：
-- -------------------- ---- -------
-
--------- ---------------
---------------- -
------------- ---------
------------------------------ ------
-------------- -----
--------------- -
------ ----
-
--
------ -
---------- -----
------- -----
--------- ----
--
---------- -----------
---------- --------- ---------------
-------- -
--------- --
------- --- ----------
--------- --- ----------
------------- --
--------------- --- -------------
------------------------------- --- - ------------- ------- ------- ---
----------------------------- --------
------------------------------ ------
-
-其中：
parser：解析器的名称，默认为 espree。我们这里使用 babel-eslint，因为它支持新的 ECMAScript 标准和一些实验性语言特性。parserOptions：定义了解析器选项。env：指定环境，可以是 browser、node、jquery、es6 等环境。extends：定义了需要扩展的配置规则。我们这里使用了 AirBnB 规则。AirBnB 规则是一组广泛接受的、严格的 JavaScript 代码风格规则。它包括很多规则，可以帮助您编写更干净、更规范的 JavaScript 代码。plugins：定义插件，插件可以为 ESLint 扩展某些特定的校验规则。例如，这里我们使用了 react 和 react-hooks 插件，它主要用于校验 React 应用程序，并支持 React Hooks 等内容。rules：定义需要强制执行的校验规则。
在编辑器中使用 ESLint
ESLint 可以与大多数编辑器（如 VS Code）一起使用。通过配置编辑器后，在保存 JavaScript 文件时，ESLint 将会自动校验、识别不规范之处并提示修改。
在 VS Code 中启用 ESLint，需要安装 ESLint 插件。之后，我们需要在 VS Code 配置中增加以下配置：
-- -------------------- ---- -------
---------------------- -----
----------------------- -----
------------- ---------
------------------ -
-------------
------------------
------
-------
-------------
-----------------
-这样，在保存 JavaScript 文件时将会自动运行 ESLint 并修复不规范的代码。
总结
本文介绍了如何使用 ESLint 校验 JavaScript 代码的代码风格，并且提供了配置文件的示例代码。ESLint 可以帮助我们保持代码风格的规范性，提高代码的可读性、可维护性和安全性。
在下一篇文章中，我们将会介绍 ESLint 如何支持更多的插件和自定义规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0ab27b5eee0b52579eeb2