在 VS Code 中为 ESLint 设置自动保存
随着前端开发的不断发展，越来越多的开发人员开始使用代码检查工具来提高代码质量和可维护性。ESLint 是其中一个非常流行的代码检查工具，它可以帮助我们在编写代码的时候自动检查和修正代码中的一些问题，例如语法错误、语义错误、代码风格等。
但是，每次修改代码后都要手动执行 ESLint 的命令来检查代码显然是非常繁琐的。为了提高工作效率，你可以把 ESLint 和 VS Code 的自动保存功能结合起来，实现在编写代码的时候自动检查和修正代码中的问题。本文将向你详细介绍如何在 VS Code 中为 ESLint 设置自动保存。
第一步：安装 ESLint 扩展
在安装之前，你需要确保已经在你的电脑上安装了 Node.js。然后打开 VS Code，按下快捷键 Ctrl+Shift+X 打开扩展面板，搜索 ESLint 并点击安装。安装完成后重启 VS Code。
第二步：配置 VS Code 的 settings.json 文件
在 VS Code 中，你可以打开 settings.json 文件，这个文件中包含了 VS Code 所有的设置。你可以在这个文件中为 ESLint 添加一些配置。在打开 settings.json 文件之前，你需要打开 VS Code 命令面板，使用 Ctrl+Shift+P 快捷键或者点击左下角的齿轮图标打开命令面板。
在命令面板中输入 “Open Settings (JSON)” 并按下回车键，这样就可以打开 settings.json 文件。在这个文件中添加以下代码：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}这段代码的作用是：当你在 VS Code 中按下保存键时，自动使用 ESLint 来修复代码中的问题。
第三步：使用 ESLint 配置文件
在使用 ESLint 的时候，你需要使用一个配置文件 .eslintrc.js 来指导 ESLint 对代码进行检查和修复。你可以在你的项目中创建这个文件。以下是一个示例配置文件：
-- -------------------- ---- -------
-------------- - -
----- -----
-------------- -
------------ -----
----------- ---------
--
---- -
-------- -----
----- -----
---- -----
--
-------- ---------------------- ----------------------------
-------- ----------
------ -
-- -----------
--
--------- -
-- ---------
--
--这个文件中包含了 ESLint 的所有配置项，你可以根据自己的项目需要进行适当的修改。
第四步：享受自动保存的便利
现在你已经完成了代码检查和修复的全部配置，可以尽情享受自动保存的便利了。在编辑代码时，你只需要按下 Ctrl+S 快捷键保存代码，ESLint 就会自动检查和修复代码中的问题。
总结
本文向你详细介绍了如何在 VS Code 中为 ESLint 设置自动保存，通过配置 settings.json 文件和 .eslintrc.js 文件，让 ESLint 自动检查和修复代码中的问题。这样可以大大提高开发效率和代码质量，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3507c83d39b488174eee1