因Prettier v3与@vue/eslint-config-prettier v7.x不兼容导致编译错误

升级Prettier至v3版本后，编译过程中出现如下错误：

> 1 | [object Promise]
|         ^
2 | export { render, staticRenderFns }
at constructor (/xxx/node_modules/@babel/parser/lib/index.js:348:19)
at JSXParserMixin.raise (/xxx/node_modules/@babel/parser/lib/index.js:3202:19)
at JSXParserMixin.unexpected (/xxx/node_modules/@babel/parser/lib/index.js:3232:16)
at JSXParserMixin.expect (/xxx/node_modules/@babel/parser/lib/index.js:3569:28)
at JSXParserMixin.parseExprList (/xxx/node_modules/@babel/parser/lib/index.js:11944:14)
at JSXParserMixin.parseArrayLike (/xxx/node_modules/@babel/parser/lib/index.js:11853:26)
at JSXParserMixin.parseExprAtom (/xxx/node_modules/@babel/parser/lib/index.js:11122:23)
at JSXParserMixin.parseExprAtom (/xxx/node_modules/@babel/parser/lib/index.js:6916:20)
at JSXParserMixin.parseExprSubscripts (/xxx/node_modules/@babel/parser/lib/index.js:10839:23)
.
.
.
at async.call.result.err.err (/xxx/node_modules/gensync/index.js:223:11)
@ ./src/components/component.vue?vue&type=template&id=b5448588& 1:0-363 1:0-363
@ ./src/components/component.vue 1:0-95 9:2-8 10:2-17 29:79-34:5 31:16-22 32:25-40 29:4-34:6
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/component.vue?vue&type=script&lang=js& 1:0-65 4:22-38
@ ./src/components/component.vue?vue&type=script&lang=js& 1:0-240 1:256-259 1:261-498 1:261-498
@ ./src/components/component.vue 2:0-68 3:0-63 3:0-63 9:2-8
@ ./src/main.js 11:0-65 27:17-33

问题原因 #

该问题由@vue/eslint-config-prettier v7.x版本与Prettier v3不兼容导致。

解决方案 #

升级@vue/eslint-config-prettier到支持Prettier v3的版本（v8.x及以上）：

使用npm： #

npm uninstall @vue/eslint-config-prettier
npm install @vue/eslint-config-prettier@latest --save-dev

使用yarn： #

yarn remove @vue/eslint-config-prettier
yarn add @vue/eslint-config-prettier@latest --dev

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