vscode prettier

前言

与通过npm安装的prettier关联

vscode 的 prettier 扩展，会优先使用 你项目中明确安装的 prettier（既 npm i prettier --D） 的版本，

如果你没有安装，则会扩展使用自己 捆绑内置的 比较旧的 prettier。

内置的 prettier 版本

确定版本

VSCode Prettier插件中内置的 prettier 版本为多少怎么查看呢？

--方式 1--

注意在自己没有给项目 npm i prettier情况下，

点击编辑器右下角的 prettier 标,此时右键格式化任意一个文件：此时控制台就会输出当前prettier的信息，

详细输出如下：

["INFO" - 22:32:05] Formatting file:///Users/dsh/Desktop/demo/index.js
["INFO" - 22:32:05] Using config file at /Users/dsh/Desktop/demo/prettier.config.js // 本次格式化 使用的prettier配置文件
["INFO" - 22:32:05] PrettierInstance: // 本次格式化， prettier实例信息
{
  "doc": {// ... },
  "version": "2.8.8", // 本次格式化，使用的 prettier 核心版本
   // ...
 }
["INFO" - 22:32:05] Formatting completed in 14ms. // 格式化完成耗时

--方式 2--

进入 vscode prettier仓库，直接查看绑定的 prettier 版本。

存在问题

截止目前 prettier-vscode v11.0.0扩展内置的 prettier v2.8.8，这跟目前(2025.5.12) prettier最新版本3.5.0 还是有不小的差距的。

比如我们在使用扩展内置的prettier 格式化如下代码就会报错 object?.name不支持可选链：

unknown type: "ChainExpression"

如果我们给项目安装 prettier，进而就会让插件使用该版本的prettier作为内核，在此尝试就不会报错。

配置文件

VS Code 的 Prettier 插件默认只会识别 cjs 格式 既prettier.config.js,

如果你的项目标记了 type: module,那么需将你的配置文件改为 prettier.config.cjs。

否则就会遇到 error resolving prettier configuration

就没人发现吗.

当然是有的，我查阅到在prettier-vscode的 issue 上就有人讨论---

卡尔霍基：为啥 esm 配置会报错？我调查发现这是因为 VS Code 的prettier扩展内部使用了旧的 Prettier v2 。
诺埃尔福特：只能项目本身安装prettier了，这样VS Code 的prettier扩展会优先使用我们自己下载的 v3 甚至更新版本的prettier内核。
约书亚·希普特：所以， prettier的vscode 扩展，绝对是垃圾！

常见问题

配置缓存

在修改 config 文件后，prettier 插件还是使用上次的配置。

解决办法：重启 vscode！

Monorepo

针对Monorepo项目，只需要在跟项目中安装 prettier即可，其他子项目均会使用这一个！