Titel umgeschrieben als: Verbesserung der Schönheit von ESLint-Schleifenfehlern

Question

Ich erstelle eine Vue-Komponente

Aber ich erhalte die folgende Fehlermeldung

Typanmerkungen können nur in TypeScript-Dateien verwendet werden.

Wenn ich die Typklausel entferne, erhalte ich

Fehlender Rückgabetyp für Funktion.

Die Komponente sieht so aus:

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

Ich schätze, ich habe einen Konflikt in den Prettier- und Eslints-Konfigurationen, also sieht der eine Vue als TS-kompatibel an und der andere nicht

Ich habe verschiedene Optimierungen und Änderungen ausprobiert, aber bisher keinen Unterschied. Kann mir also jemand die richtige Konfiguration nennen, um das Problem zu beheben?

tsconfig.json

{
  „compilerOptions“: {
    „target“: „esnext“,
    „module“: „esnext“,
    „streng“: wahr,
    „jsx“: „bewahren“,
    „importHelpers“: wahr,
    „moduleResolution“: „node“,
    „experimentalDecorators“: wahr,
    „skipLibCheck“: wahr,
    „esModuleInterop“: true,
    „allowSyntheticDefaultImports“: true,
    „sourceMap“: wahr,
    „baseUrl“: „.“,
    "Typen": [
      „webpack-env“
    ],
    "Pfade": {
      "@/*": [
        „src/*“
      ]
    },
    "lib": [
      „esnext“,
      „dom“,
      „dom.iterable“,
      "Script host"
    ]
  },
  "enthalten": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  „ausschließen“: [
    „node_modules“
  ]
}

babel.config.js

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

设置，json

{
    „editor.insertSpaces“: false,
    „editor.minimap.enabled“: false,
    „files.eol“: „n“,
    „workbench.sideBar.location“: „rechts“,
    „php-cs-fixer.executablePath“: „${extensionPath}php-cs-fixer.phar“,
    "Start": {
        "Konfigurationen": [],
        „Verbindungen“: []
    },
    „debug.javascript.usePreview“: false,
    "window.zoomLevel": 3,
    „eslint.format.enable“: wahr
}

package.json

{
  "Abhängigkeiten": {
    „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“: wahr,
    „env“: {
      „Knoten“: wahr
    },
    "erweitert": [
      „plugin:vue/vue3-essential“,
      „eslint:empfohlen“,
      „@vue/typescript/recommended“,
      „@vue/prettier“,
      „@vue/prettier/@typescript-eslint“
    ],
    "parserOptions": {
      „ecmaVersion“: 2020
    },
    "Regeln": {}
  },
  "Browserliste": [
    „> 1 %“,
    „letzte 2 Versionen“,
    "nicht tot"
  ]
}

Answer 1

我之前也遇到了同样的问题，用以下代码修复：

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

如果对你有用，请告诉我。