Title rewritten as: Improving the beauty of ESLint loop errors

Question

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:

<template>
    <pre>Market:{{ market }}

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"
  ]
}

Answer 1

I also encountered the same problem before and fixed it with the following code:

<script lang="ts">
    ...
</script>

If it is useful to you, please tell me.