526互联

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

发布时间 2023-06-15 23:35:09作者: sq800

背景

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

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

例如：

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

问题所在

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

  1. 项目内的settings.json
    .vscode文件夹是在 git 忽略文件 .gitignore 列表中的
    image
    因此上传GitHub时，项目内的.vscode/settings.json是没有上传上去的，删掉这条规则，或新增一条规则：
!.vscode/settings.json

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

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
  1. vscode的设置
    打开设置>ESLint
    勾选这个选项，打开ESLint的格式化功能：
    image

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