在前端开发过程中，代码质量是一个非常重要的问题。而 ESLint 提供了一种简单易用的工具，用于对代码进行静态检查，避免代码中存在一些常见的错误和不规范的写法。本文将介绍如何在 WebStorm 中配置 ESLint，并使用它来提高代码质量和编写效率。
安装 ESLint
要使用 ESLint，我们首先需要在项目中安装它。在 WebStorm 中，我们可以通过使用 npm 安装 ESLint：
npm install eslint --save-dev
这会在项目中安装 ESLint，并将其添加到开发依赖中，使得可以在本地使用它。
配置 ESLint
安装完 ESLint 之后，我们需要在 WebStorm 中进行配置。首先，在 WebStorm 的设置界面中，选择“Languages & Frameworks > JavaScript > Code Quality Tools > ESLint”，点击“Enable”来启用 ESLint，如图所示：
然后，在“ESLint”设置界面中，我们可以设置一些与 ESLint 相关的配置，包括：
- 使用哪个 ESLint 配置文件：可以选择一个已存在的 ESLint 配置文件，或使用 WebStorm 提供的默认设置。
- 选择要检查的文件：可以选择要检查的文件类型，或是排除某些文件或文件夹。
- 配置 ESLint 命令行参数：可以添加一些参数以适应不同的项目需求。
根据需要进行相应的配置即可。
使用 ESLint
配置完 ESLint 后，我们就可以使用它来检查代码了。在 WebStorm 中，我们可以使用快捷键 Ctrl + Shift + Alt + E 来对代码进行检查。如果代码中存在错误或不规范之处，WebStorm 会发出提示，并在代码上面标出错误的位置，如图所示：
此外，我们还可以在 WebStorm 的设置界面中配置 ESLint 的自动修复功能。在“ESLint”设置界面中勾选“Run eslint --fix on save”选项即可，如图所示：
开启了自动修复功能之后，当我们保存代码时，WebStorm 就会自动运行 ESLint 命令，并将代码中的错误和不规范之处进行修复。
示例代码
下面是一段示例代码，其中包含一些常见的 ESLint 错误和不规范写法：
-- -------------------- ---- -------
----- - - --
--- - - --
-- -- -- --
- - --
-------- ------ -- -
------ - - -
-
----------------------使用 ESLint 对其进行检查，会提示以下错误和不规范之处：
a == 1应该改为a === 1。sum函数应该添加{和}，并且在函数名后添加空格。console.log(sum(a,b))应该改为console.log(sum(a, b));。
将这些错误和不规范之处进行修正后，代码应该会变成这样：
-- -------------------- ---- -------
----- - - --
--- - - --
-- -- --- -- -
- - --
-
-------- ------ -- -
------ - - --
-
------------------ ----总结
本文介绍了如何在 WebStorm 中配置并使用 ESLint，来提高代码质量和编写效率。配置和使用 ESLint 可以帮助我们排查代码中的错误和不规范之处，并在开发过程中改善代码质量。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64925d2448841e9894026d66