prettier ESLint circular errors - vue.js

Question

i am creating a vue component
but i am getting the following error
Type annotations can only be used in TypeScript files.
if i remove the type clause i then get
Missing return type on function.
the component looks like:
<template>
<pre>Market:{{ market }}</pre>
</template>
<script>
import Market from "./Market";
export default {
name: Market,
components: {},
data() { //<--- issue is reported here
return {
market: new Market(),
};
},
};
</script>
i'm guessing i have a conflict in prettier and eslints config so that one is treating vue as TS compatableand the other isn't
i've tried various tweaks and changes but nothing so far has made any diference so can any one point me to the correct config to resolve 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"],
};
settings,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
}
packange.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"
]
}

Answer 1

I already had the same issue, fix it with:
<script lang="ts">
...
</script>
let me know if it works for you