ESLint 是一个流行的 JavaScript 代码检查工具，可以帮助开发者发现和修复代码中的错误、风格问题和潜在的安全漏洞。在前端开发中，使用 ESLint 可以帮助我们保持代码风格的统一和规范，提高代码质量和可读性。
在本文中，我们将介绍如何在 VSCode 中配置 ESLint 规则。
安装 VSCode 插件和 ESLint
在 VSCode 中使用 ESLint，首先需要安装 ESLint 插件，在 VSCode 的插件市场可以方便地搜索并安装插件。安装完成后，我们需要在项目中安装 ESLint，并配置 ESLint 规则。
通过 npm 安装 ESLint：
$ npm i eslint --save-dev
配置 ESLint 规则
在项目根目录创建一个 .eslintrc.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
---------- ---------------------
-------- -
------- --
--------- --------- --
--
------ -
---------- -----
------- ----
-
-以上配置中：
"extends": "eslint:recommended"：采用eslint:recommended预设的规则。"rules": {...}：用于自定义规则。例如，这里设置semi规则为强制使用分号，并且当缩进不为2空格时报错。"env": {...}：用于设置脚本的运行环境。例如，这里设置运行环境为浏览器和 Node.js。
使用 VSCode 的 ESLint 插件检查代码
在配置完成后，我们可以使用 VSCode 的 ESLint 插件来检查代码。开启 VSCode 的 ESLint 插件，在编辑器中输入代码，在保存时会自动触发代码检查，并将错误显示在编辑器的 Problems 窗口中。
可以看到，这个例子中在第 1 行处，为强制使用分号的规则发生错误。
同时，我们还可以在 VSCode 中的设置中，定制更多的检查规则和插件配置。点击菜单 Preferences: Open User Settings，在打开的 JSON 配置文件中，搜索 eslint，即可找到 ESLint 插件的相关配置选项。
总结
本文介绍了如何在 VSCode 中配置和使用 ESLint 规则，以及通过 VSCode 的 ESLint 插件检查代码。使用 ESLint 可以帮助我们更好地编写符合规范的代码，提升代码质量和可读性，在实际开发中应该经常使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d32fe6b5eee0b525ab59e5