ESLint 是一个非常流行的 JavaScript 语法检查工具，它可以帮助我们找出代码中存在的语法错误、不规范的代码风格等问题。在前端开发中经常会用到 ESLint，本文就介绍一下在 VSCode 中使用 ESLint 的一些方法及技巧。
安装 ESLint
首先我们需要在项目中安装 ESLint。可以使用 npm 或者 yarn 安装：
# 使用 npm 安装 npm i eslint --save-dev # 使用 yarn 安装 yarn add eslint --dev
在 VSCode 中配置 ESLint
安装好 ESLint 后，我们需要在 VSCode 中配置一下才能使用它的功能。可以按下图所示打开 VSCode 的用户设置界面：
在用户设置中，我们搜索 “eslint.validate” 这个选项，这个选项用来开启 VSCode 对 JavaScript 文件进行语法检查的功能。默认情况下这个选项为 false，我们需要将其设置为 true：
"eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ]
上面的配置表示对 js、jsx、ts、tsx 文件进行语法检查。
在项目中配置 ESLint
在项目中我们还需要配置一下 ESLint 的规则，以及一些插件的使用等等。我们可以在项目根目录下新建一个 .eslintrc.js 文件，来配置项目使用的规则。示例如下：
-- -------------------- ---- -------
-------------- - -
--------- ----------------------------
---------- -----------------------
---------- -
---------------------
-----------------------------------------------
---------------------------------------
--
-------- -
--------- --------- ---
------- --------- ----------
--------------------------------------------------- -----
-
-上面的配置中我们使用了 @typescript-eslint/parser 来解析 TypeScript 代码，使用了 @typescript-eslint 插件来为 TypeScript 代码提供规则。我们还继承了一些 eslint 的推荐规则，让我们的代码更加规范。
上面的 rules 部分是我们自定义的规则配置。例如我们对代码缩进及末尾分号的使用进行了约束，同时关闭了 TypeScript 中函数的明确返回类型的强制规则。
如何在 VSCode 中使用 ESLint
好的，我们配置好了 ESLint，接下来就是在 VSCode 中使用它的方法了。
使用提示
当我们打开一个 JavaScript 文件时，如果代码中存在 ESLint 规则下的问题，我们会看到下划线及红色波浪线来提示我们。
当我们将鼠标移到红色波浪线处时，就能看到提示信息及对应的修复建议。
使用 Quick Fix
我们可以在 VSCode 中使用 Quick Fix 来自动修复代码中的 ESLint 错误。当我们在代码中按下 Ctrl+. 时，可以看到对应的修复建议，并选择对应的选项进行修复。
保存时自动修复
如果你不想手动修复代码中存在的 ESLint 错误，那么我们可以配置 VSCode 在保存代码时自动修复这些问题。我们可以在用户设置中添加如下配置：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}这个配置表示在保存代码时自动修复所有代码中存在的 ESLint 错误。
总结
使用 ESLint 可以帮助我们更好地规范代码风格、发现代码中的问题，提高代码质量。当然，在 VSCode 中使用 ESLint，对于开发效率和规范化也有很大的帮助。本文介绍了在 VSCode 中配置并使用 ESLint 的一些方法及技巧，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdf70bb5eee0b5255eb1a7