使用Prettier格式化时出现TypeError: prettierApi.resolveConfig.sync不是函数问题

问题背景 #

在WebStorm中按下格式化快捷键后触发Prettier报错，核心报错栈如下：

at PrettierPlugin.resolveConfig (/Applications/WebStorm.app/Contents/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:42:48)
at PrettierPlugin.handleReformatCommand (/Applications/WebStorm.app/Contents/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:28:27)
at PrettierPlugin.onMessage (/Applications/WebStorm.app/Contents/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:13:33)
at Interface.<anonymous>

项目依赖配置：

{
  "@tailwindcss/forms": "^0.5.3",
  "@vitejs/plugin-vue": "^4.1.0",
  "autoprefixer": "^10.4.14",
  "eslint-plugin-prettier": "^5.0.0",
  "lint-staged": "^13.2.3",
  "postcss": "^8.4.24",
  "prettier": "2.8.8",
  "tailwindcss": "^3.3.2",
  "vite": "^4.3.9"
}

已尝试降级Prettier至2.8.8，问题仍未解决。

排查与解决步骤 #

1. 确认WebStorm的Prettier配置指向本地依赖
   打开WebStorm设置（快捷键Cmd+,），进入Languages & Frameworks > JavaScript > Prettier：

   • 确保Prettier package选择的是项目根目录下node_modules/prettier，而非WebStorm内置版本
   • 勾选Run on 'Reformat Code' action，确保格式化动作触发Prettier

2. 清理WebStorm缓存并重启
   执行File > Invalidate Caches...，选择Invalidate and Restart，解决插件或配置加载异常的问题。

3. 检查Prettier配置文件

   • 确认项目根目录存在.prettierrc/prettier.config.js等配置文件，若缺失，创建基础配置：

     {
       "semi": true,
       "singleQuote": true,
       "printWidth": 80
     }
     

   • 若已有配置文件，检查是否存在语法错误（比如JSON格式错误、JS配置的语法问题）

4. 排查插件兼容性
   eslint-plugin-prettier@5.0.0对Prettier 2.x版本的兼容性可能存在问题：

   • 临时卸载eslint-plugin-prettier，执行：

     npm uninstall eslint-plugin-prettier
     npm install
     

     测试格式化是否正常；若正常，重新安装适配版本：

     npm install eslint-plugin-prettier@^4.2.1 --save-dev
     

5. 验证命令行格式化是否正常
   在项目根目录执行手动格式化命令，确认是否为WebStorm插件问题：

   npx prettier --write src/your-target-file.vue
   

   若命令行执行正常，说明问题出在WebStorm插件上：

   • 更新WebStorm到最新版本
   • 卸载并重装WebStorm的Prettier插件

内容的提问来源于stack exchange，提问作者Charlene