vscode 格式化 js 代码错误

5 阅读1分钟

这段时间一直不知道为啥,写react+ts项目时,开启了保存自动格式化,会经常出现格式化错误,小的错误是多了一个分号,比如这样,保存后就多了分号,需要在手动删除一个

image.png 而大的问题,是在写 react 模板的时候,会把我的标签结尾删掉,导致我写了一段后,格式化一下就直接报错了; 以及可能会把我的 import 导入语句删掉一些,导致也直接报错;

可能的一个原因是配置里面有两份格式化配置,导致保存的时候运行了两次,导致错误;

所以关闭一个自动格式化配置就可以了 具体更改后的配置如下

{
  // 本项目内格式化与 Prettier 配置(避免与用户全局 Prettier 冲突)
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 强制本工作区使用项目 .prettierrc,覆盖用户全局 prettier.*
  "prettier.printWidth": 120,
  "prettier.trailingComma": "none",
  "prettier.requireConfig": true,
  // 仅在本项目开启保存时格式化(只用 Prettier,不跑 ESLint fix)
  "editor.formatOnSave": true,
  // 保存时不运行 ESLint fix,避免与 Prettier 重复改同一处(如 return;;)
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "never"
  }
}

相关解释如下,我就不手打了

image.png

或者把当前编辑器的配置丢给deepseek,让 deepSeek 帮你分析配置有没有冲突,有的话帮你解决