VScode 保存时 Prettier 卡顿很久，保存速度变慢的解决办法

引言

最近在前端开发中，遇到一个极其影响效率的问题：每次保存代码时，Prettier 都会卡住 10 多秒甚至更久，严重拖慢开发节奏。网上查阅了大量资料，尝试了各种方法，始终未能彻底解决。

问题表现

  • 保存代码时，状态栏显示“正在通过 Prettier 格式化”，但长时间无响应。
  • 保存一次代码需要等待十几秒甚至更久。
  • 关闭 Prettier 插件后恢复正常，但无法享受自动格式化。

解决方案

经过多次排查和尝试，最终通过以下两个方法彻底解决了卡顿问题：

方案一：删除 editor.codeActionsOnSave 配置

  1. 打开 VSCode 设置（settings.json）。

  2. 查找并删除如下配置：

    1
    2
    3
    "editor.codeActionsOnSave": {
      // ...可能的内容
    }

  3. 保存并重启 VSCode。

该配置会在保存时触发额外的代码操作，与 Prettier 可能存在冲突或性能问题，删除后保存速度明显提升。

方案二：替换 Auto import 插件

如果你安装了 Auto import - ES6,TS,JSX,TSX 插件，建议卸载，并改用官方的 Auto Import 插件：

  1. 打开扩展市场，搜索并卸载 Auto import - ES6,TS,JSX,TSX。
  2. 安装 Auto Import（开发者：Steoates）。

实测部分第三方 Auto import 插件与 Prettier 存在兼容性或性能问题，替换后保存卡顿现象消失。

总结

以上两个方法完美解决了我这边 Prettier 保存卡顿的问题。如果你也遇到类似困扰，不妨尝试上述方案。