什么是 ESLint？
ESLint 是一个插件化的 JavaScript 代码检查工具，它可以扩展来检查代码的语法和代码风格，并提供自动修复功能。ESLint 还提供了许多的规则可以自定义和配置，以满足不同的团队和项目的需求。
使用 ESLint 可以帮助团队对代码统一化，维护代码质量，减少错误和 bug。
WebStorm 中的 ESLint
WebStorm 是一个流行的集成开发环境，它提供了各种前端开发工具来提高开发效率和质量。在 WebStorm 中，我们可以通过安装 ESLint 插件来启用代码检查功能。
WebStorm 提供了两种不同的方式来运行 ESLint：
- 作为 WebStorm 中的一个内置工具，在 WebStorm 的编辑器界面中直接查看 ESLint 分析结果。
- 作为一个独立的命令行工具运行，在终端中查看 ESLint 分析结果。
我们会重点介绍第一种方式。
启用 ESLint 插件
在安装和启用 ESLint 插件之前，请确保你的 WebStorm 版本是最新的，并且已经安装了 Node.js 和 npm。
安装 ESLint 插件
在 WebStorm 中，你可以通过两种方式来安装 ESLint 插件：
- 在插件管理器中搜索并安装插件。
- 手动安装插件。
我们将介绍第一种方式。
- 打开 WebStorm，然后进入 Settings/Preferences。
- 在左侧菜单栏中选择 Plugins，然后在右侧选择 Marketplace。
- 在插件市场中搜索 ESLint，并点击安装。
配置 ESLint
安装完成后，需要进行一些简单的配置才能启用 ESLint。
- 打开 Settings/Preferences。
- 选择 Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint。
- 勾选 "Enable"，然后在 “ESLint Package” 中选择对应的项目路径。
- 如果没有安装任何 ESLint 插件，则点击 “Download” 按钮来安装它。
- 在 “Rules” 标签下可以根据业务需求为 ESLint 定制一些规则，如代码缩进、变量名大小写等。
启用自动修复功能
通过钩子函数自动修复你的代码是使用 ESLint 的最快和最方便的方法。自动修复可以解决大量的代码风格问题，并帮助你在提交代码之前自动化解决问题。
在 WebStorm 中，可以设置 ESLint 钩子函数自动修复错误和警告。在检查代码时，如果发现 ESLint 发出的警告或错误，WebStorm 会询问你是否自动修复它们。你可以自动修复错误或选择手动修复。
启用自动修复功能，需要在安装并配置完成 ESLint 插件之后，按以下步骤进行：
- 打开 Settings/Preferences。
- 选择 Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint。
- 勾选 “Run eslint –fix on save”，并保存。
这样，每当保存文件时，WebStorm 就会自动修复代码风格问题。
在 WebStorm 中运行 ESLint
现在，你已经成功配置了 ESLint 插件，并启用了自动修复功能。下面介绍如何在 WebStorm 中运行 ESLint：
打开一个 JavaScript 文件，新建或导入一个带有新增的变量命名规则的 JavaScript 文件，但未启用 ES Lint 的页面。 WebStorm 自动进行检测，会对未启用 ESLint 的页面进行提醒，指出此处有问题。如下图中，我们新建了一个变量，变量名不符合规范，WebStorm 触发了红色警告。
接下来，我们改为导入启用了 ESLint 的文件，WebStorm 自动进行检测，发现有不满足规则的例子，并在行号前加入红色提示符。我们可以点击红色提醒处进行查看，并点击 Auto-Fix 进行自动修复。
这样，我们就可以通过 WebStorm 快速启用和运行 ESLint 来帮助我们检测 JavaScript 代码语法和代码风格。同时，也可以通过自动修复降低代码错误风险。
总结
本文介绍了如何在 WebStorm 中使用 ESLint 进行 JavaScript 代码检查，包括安装和配置 ESLint 插件，启用自动修复功能以及运行 ESLint。通过使用 ESLint，团队可以统一代码风格、提升代码质量，避免错误和 bug。
ESLint 提供的规则与自定义能力丰富，可以满足不同的团队和项目的需求。使用 WebStorm 配合 ESLint 可以快速进行代码检查，降低开发者的出错风险和减轻开发者的调试难度。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c31b1383d39b488170b7b1