我正在创建一个 vue 组件

但我收到以下错误

Type annotations can only be used in TypeScript files.

如果我删除类型子句，我就会得到

Missing return type on function.

组件看起来像：

我猜我在 prettier 和 eslints 配置中存在冲突，因此一个将 vue 视为 TS 兼容，而另一个则不然

我已经尝试了各种调整和更改，但到目前为止没有任何区别，所以有人可以指出我正确的配置来解决这个问题吗？

tsconfig.json{ “编译器选项”：{ “目标”：“esnext”， “模块”：“esnext”， “严格”：真实， "jsx": "保留", “导入助手”：正确， "moduleResolution": "节点", “experimentalDecorators”：正确， “skipLibCheck”：正确， “esModuleInterop”：true， “allowSyntheticDefaultImports”：true， “源地图”：正确， "baseUrl": ".", “类型”：[ “webpack-env” ], “路径”：{ “@/*”：[ “源代码/*” ] }, “库”：[ “es下一个”， “多姆”， “dom.iterable”， “编剧” ] }, “包括”： [ “src/**/*.ts", “源代码/**/*.tsx”, “src/**/*.vue", “测试/**/*.ts”, “测试/**/*.tsx” ], “排除”： [ “节点模块” ] }

babel.config.js

module.exports = { 预设：[“@vue/cli-plugin-babel/preset”]， };

设置，json{ "editor.insertSpaces": false, "editor.minimap.enabled": false, "文件.eol": "n", "workbench.sideBar.location": "右", "php-cs-fixer.executablePath": "${extensionPath}\php-cs-fixer.phar", “发射”： { “配置”：[]， “化合物”：[] }, "debug.javascript.usePreview": false, “窗口.zoomLevel”：3， “eslint.format.enable”：true }

package.json

{ “依赖项”：{ "core-js": "^3.6.5", "vue": "^3.0.0", “vue-class-component”：“^8.0.0-0” }, “开发依赖项”：{ "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.0.0", "更漂亮": "^2.2.1", “打字稿”：“~4.1.5” }, “eslint配置”：{ “根”：正确， “环境”：{ “节点”：真 }, “延伸”：[ “插件：vue/vue3-essential”， “eslint：推荐”， “@vue/typescript/推荐”， “@vue/更漂亮”， “@vue/prettier/@typescript-eslint” ], “解析器选项”：{ “ecma版本”：2020 }, “规则”：{} }, “浏览器列表”：[ “>1%”， “最后两个版本”， “没死” ] }

>