VSCode 安装ESLint并配置为保存自动格式化

ESLint 是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

ESLint 是完全可插拔的。 每条规则都是一个插件，您可以在运行时添加更多。 您还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

ESLint快速安装

要使用 ESLint，必须安装Node.js（^12.22.0、^14.17.0 或 >=16.0.0）。

运行下面的命令，进入安装向导：

npm init @eslint/config

根据项目实际情况选择就可以了，然后会根据选择的情况安装对应的包。

ESLint手动安装（不推荐）

可以执行下面的命令手动安装，参考官方文档：

https://eslint.org/docs/latest/user-guide/getting-started#manual-set-up

npm install --save-dev eslint

配置ESLint保存自动格式化

打开VSCode菜单 File>Preferences>Settings。

可以选择User或者Workspace，这里以设置Workspace为例，配置只在当前工作区生效。

我们在上面的搜索框里输入Code Actions On Save，可以看到关于ESLint的配置。

Mode 我们可以选择all或者problems。

然后我们点击Edit in settings.json, 在文件中添加如下配置：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

修改后保存就可以了。

配置没有生效的原因

检查一下是否安装了其他Code formatter插件，比如Prettier等。他们的格式化规则可能冲突。

在settings.json里检查是否配置了其他格式化插件codeActionsOnSave，如果有把其他的删掉就好了。