I am creating a vue component

But I get the following error

Type annotations can only be used in TypeScript files.

If I remove the type clause, I get

Missing return type on function.

The component looks like:

I guess I have a conflict in the prettier and eslints configurations, so one sees vue as TS compatible and the other doesn't

I've tried various tweaks and changes but so far no difference, so can someone point me to the correct configuration to fix this?

tsconfig.json

{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] }

babel.config.js

module.exports = { presets: ["@vue/cli-plugin-babel/preset"], };

设置，json

{ "editor.insertSpaces": false, "editor.minimap.enabled": false, "files.eol": "n", "workbench.sideBar.location": "right", "php-cs-fixer.executablePath": "${extensionPath}\php-cs-fixer.phar", "launch": { "configurations": [], "compounds": [] }, "debug.javascript.usePreview": false, "window.zoomLevel": 3, "eslint.format.enable": true }

package.json

{ "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-class-component": "^8.0.0-0" }, "devDependencies": { "@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", "prettier": "^2.2.1", "typescript": "~4.1.5" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }