prettier ESLint circular errors

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