记一次 ESLint 格式化代码踩坑（小坑）

背景

最近在尝试使用 ESLint 取代 Prettier 来格式化代码，主要受Antfu博客：https://antfu.me/posts/why-not-prettier-zh 的启发，其中提到的痛点，也确实有遇到。于是决定使用Antfu大佬提供的eslint-config 配置。

readme把步骤说的非常清楚，在公司一步一步配置，也没有任何问题，用起来很是愉快。回家后，从远程仓库拉下来代码，准备继续玩，却发现格式化功能一直用不起来。

例如：

• 扩展'ESLint'配置为格式化程序，但不能格式化'TypeScript'-文件
  
• 无法设置为Vue的格式化程序
  

问题所在

最终发现两个问题，一个是项目中的 settings.json，另一个是 vscode 的设置（也是settings.json）。

1. 项目内 .vscode 文件夹的 settings.json

.vscode 文件夹是在 .gitignore 中写明了的

因此上传GitHub时，项目内的.vscode/settings.json是没有上传上去的，删掉这条规则，或新增一条规则：

!.vscode/settings.json

添加文件 .vscode/settings.json，文件内容：

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

2. vscode的设置

打开设置>ESLint

勾选这个选项，打开ESLint的格式化功能：

用户旁边的工作区设置，指的就是 .vscode/settings.json，如果勾选上工作区里面的选项，会自动在.vscode/settings.json，中添加一条：

{
 "prettier.enable": false,
 "editor.formatOnSave": false,
 "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
 },
 "eslint.format.enable": true
}

这样做的好处是只在当前工作区生效，不影响全局用户的设置。

这两个问题解决掉后，使用 ESLint 格式化代码基本上没有问题了。