Titre réécrit comme : Améliorer la beauté des erreurs de boucle ESLint

Question

Je crée un composant vue

Mais j'obtiens l'erreur suivante

Les annotations de type ne peuvent être utilisées que dans les fichiers TypeScript.

Si je supprime la clause type, j'obtiens

Type de retour manquant sur la fonction.

Le composant ressemble à :

<template>
    <pre>Marché :{{ market }}

Je suppose que j'ai un conflit entre les configurations plus jolie et eslints, donc l'un voit vue comme compatible TS et l'autre ne le fait pas

J'ai essayé divers ajustements et modifications, mais jusqu'à présent, aucune différence. Quelqu'un peut-il m'indiquer la configuration correcte pour résoudre ce problème ?

tsconfig.json

{
  "Options du compilateur": {
    "cible": "suivant",
    "module": "suivant",
    "strict" : vrai,
    "jsx": "préserver",
    "importHelpers": vrai,
    "moduleResolution": "nœud",
    "experimentalDecorators": vrai,
    "skipLibCheck": vrai,
    "esModuleInterop": vrai,
    "allowSyntheticDefaultImports": vrai,
    "sourceMap": vrai,
    "baseUrl": ".",
    "les types": [
      "webpack-env"
    ],
    "chemins": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "suivant",
      "dom",
      "dom.iterable",
      "hôte de script"
    ]
  },
  "inclure": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "essais/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclure": [
    "noeud_modules"
  ]
}
babel.config.js
module.exports = {
  préréglages : ["@vue/cli-plugin-babel/preset"],
};
设置，json
{
    "editor.insertSpaces": faux,
    "editor.minimap.enabled": faux,
    "files.eol": "n",
    "workbench.sideBar.location": "à droite",
    "php-cs-fixer.executablePath": "${extensionPath}php-cs-fixer.phar",
    "lancement": {
        "configurations": [],
        "composés": []
    },
    "debug.javascript.usePreview": faux,
    "window.zoomLevel": 3,
    "eslint.format.enable": vrai
}
package.json
{
  "dépendances": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0"
  },
  "dépendances dev": {
    "@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",
    "plus joli": "^2.2.1",
    "typescript": "~4.1.5"
  },
  "eslintConfig": {
    "racine": vrai,
    "env": {
      "nœud": vrai
    },
    "étend": [
      "plugin:vue/vue3-essential",
      "eslint : recommandé",
      "@vue/typescript/recommandé",
      "@vue/plus jolie",
      "@vue/plus joli/@typescript-eslint"
    ],
    "ParserOptions": {
      "ecmaVersion": 2020
    },
    "règles": {}
  },
  "liste des navigateurs": [
    "> 1 %",
    "2 dernières versions",
    "pas mort"
  ]
}

            

Answer 1

J'ai également rencontré le même problème auparavant et je l'ai résolu avec le code suivant :

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

Si cela fonctionne pour vous, faites-le-moi savoir.