Tajuk ditulis semula sebagai: Meningkatkan keindahan ralat gelung ESLint

Question

Saya sedang mencipta komponen vue

Tetapi saya mendapat ralat berikut

Anotasi jenis hanya boleh digunakan dalam fail TypeScript.

Jika saya mengalih keluar klausa jenis, saya mendapat

Tiada jenis pulangan pada fungsi.

Komponen kelihatan seperti:

<template>
    <pra>Pasaran:{{ pasaran }}</pra>
</template>

<skrip>
import Pasaran daripada "./Market";

eksport lalai {
    nama: Pasar,
    komponen: {},
    data() { //<--- isu dilaporkan di sini
        kembali {
            pasaran: Pasaran baharu(),
        };
    },
};
</script>

Saya rasa saya mempunyai konflik dalam konfigurasi yang lebih cantik dan eslints, jadi seseorang melihat vue sebagai TS serasi dan yang lain tidak

Saya telah mencuba pelbagai tweak dan perubahan tetapi setakat ini tiada perbezaan, jadi bolehkah seseorang menunjukkan saya kepada konfigurasi yang betul untuk membetulkannya?

tsconfig.json

{
  "compilerOptions": {
    "sasaran": "seterusnya",
    "modul": "seterusnya",
    "ketat": benar,
    "jsx": "pelihara",
    "importHelpers": benar,
    "moduleResolution": "nod",
    "experimentalDecorators": benar,
    "skipLibCheck": benar,
    "esModuleInterop": benar,
    "allowSyntheticDefaultImports": benar,
    "sourceMap": benar,
    "baseUrl": ".",
    "jenis": [
      "webpack-env"
    ],
    "laluan": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "seterusnya",
      "dom",
      "dom.iterable",
      "hos skrip"
    ]
  },
  "termasuk": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "ujian/**/*.ts",
    "ujian/**/*.tsx"
  ],
  "kecualikan": [
    "node_modules"
  ]
}

babel.config.js

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

设置，json

{
    "editor.insertSpaces": palsu,
    "editor.minimap.enabled": palsu,
    "files.eol": "n",
    "workbench.sideBar.location": "kanan",
    "php-cs-fixer.executablePath": "${extensionPath}php-cs-fixer.phar",
    "pelancaran": {
        "konfigurasi": [],
        "sebatian": []
    },
    "debug.javascript.usePreview": palsu,
    "window.zoomLevel": 3,
    "eslint.format.enable": benar
}

package.json

{
  "kebergantungan": {
    "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",
    "lebih cantik": "^2.2.1",
    "typescript": "~4.1.5"
  },
  "eslintConfig": {
    "akar": benar,
    "env": {
      "nod": benar
    },
    "lanjutkan": [
      "plugin:vue/vue3-essential",
      "eslint:disyorkan",
      "@vue/typescript/disyorkan",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "peraturan": {}
  },
  "senarai pelayar": [
    "> 1%",
    "2 versi terakhir",
    "tidak mati"
  ]
}

Answer 1

Saya juga mengalami masalah yang sama sebelum ini dan membetulkannya dengan kod berikut:

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

Jika ini sesuai untuk anda, sila beritahu saya.