更漂亮的 ESLint 循环错误

Question

我正在创建一个 vue 组件

但我收到以下错误

Type annotations can only be used in TypeScript files.

如果我删除类型子句，我会得到

Missing return type on function.

组件看起来像：

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

<script>
import Market from "./Market";

export default {
    name: Market,
    components: {},
    data() { //<--- issue is reported here
        return {
            market: new Market(),
        };
    },
};
</script>

我猜我在 prettier 和 eslints 配置中有冲突，所以一个将 vue 视为 TS 兼容而另一个不是

我已经尝试了各种调整和更改，但到目前为止没有任何不同，所以有人可以指出我正确的配置来解决这个问题吗？

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
}

packange.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

我已经遇到了同样的问题，解决它：

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

让我知道它是否适合你

更漂亮的 ESLint 循环错误

prettier ESLint circular errors

eslint

vue.js

prettier