タイトルを次のように書き直しました: ESLint ループ エラーの美しさを改善する

Question

vue コンポーネントを作成しています

しかし、次のエラーが表示されます

型アノテーションは TypeScript ファイルでのみ使用できます。

type 句を削除すると、

が返されます。

関数の戻り値の型がありません。

コンポーネントは次のようになります:

<テンプレート>
    <pre>マーケット:{{ マーケット }}

<スクリプト> マーケットを「./Market」からインポートします。 デフォルトのエクスポート { 名前: マーケット、 コンポーネント: {}、 data() { //<--- 問題はここで報告されています 戻る { マーケット: 新しいマーケット()、 }; }、 };

prettier 構成と eslints 構成に競合があると思われます。そのため、一方は vue を TS 互換とみなし、もう一方はそうでないと考えます。

さまざまな調整や変更を試しましたが、今のところ違いはありません。誰かがこれを修正するための正しい構成を教えてもらえますか?

tsconfig.json

{
  "コンパイラーオプション": {
    "ターゲット": "エスネクスト",
    "モジュール": "エスネクスト",
    "厳密": true、
    "jsx": "保存",
    "importHelpers": true、
    "モジュール解像度": "ノード",
    "experimentalDecorators": true、
    "skipLibCheck": true、
    "esModuleInterop": true、
    "allowSyntheticDefaultImports": true、
    "sourceMap": true、
    "baseUrl": ".",
    "種類"： [
      「webpack-env」
    ]、
    「パス」: {
      "@/*": [
        "src/*"
      】
    }、
    "ライブラリ": [
      「エスネクスト」、
      「ドム」、
      "dom.iterable",
      「スクリプトホスト」
    】
  }、
  "含む"： [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    「テスト/**/*.ts",
    「テスト/**/*.tsx」
  ]、
  「除外」: [
    「ノードモジュール」
  】
}

babel.config.js

module.exports = {
  プリセット: ["@vue/cli-plugin-babel/preset"],
};

設置、json

{
    "editor.insertSpaces": false、
    "editor.minimap.enabled": false、
    "files.eol": "n",
    "workbench.sideBar.location": "右",
    "php-cs-fixer.executablePath": "${extensionPath}\php-cs-fixer.phar",
    "打ち上げ"： {
        「設定」: [],
        「化合物」: []
    }、
    "debug.javascript.usePreview": false、
    "window.zoomLevel": 3、
    "eslint.format.enable": true
}

package.json

{
  "依存関係": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-クラス-コンポーネント": "^8.0.0-0"
  }、
  "devDependency": {
    "@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",
    "よりきれい": "^2.2.1",
    "タイプスクリプト": "~4.1.5"
  }、
  "eslintConfig": {
    "ルート": true、
    "環境": {
      「ノード」: true
    }、
    「拡張する」: [
      "プラグイン:vue/vue3-essential",
      "eslint: 推奨",
      "@vue/typescript/推奨",
      "@vue/prettier",
      「@vue/prettier/@typescript-eslint」
    ]、
    "parserOptions": {
      「ecmaバージョン」: 2020
    }、
    「ルール」: {}
  }、
  "ブラウザリスト": [
    "> 1%"、
    "最後の 2 つのバージョン",
    "死んでいません"
  】
}

Answer 1

私も以前に同じ問題に遭遇し、次のコードで修正しました:

リーリー

それがあなたにとって役立つ場合は、教えてください。