我正在創建一個 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”：正確， “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, "files.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%”， “最後兩個版本”， “沒死” ] }

>