更漂亮的 ESLint 循环错误答案

【问题标题】：prettier ESLint circular errors更漂亮的 ESLint 循环错误
【发布时间】：2021-11-01 02:39:51
【问题描述】：

我正在创建一个 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"
  ]
}

【问题讨论】：

prettier 和 eslints 配置 - 哪个配置？这个问题没有。见stackoverflow.com/help/mcve。您描述的问题通常没有意义，因为 TS linter 规则不应该用于 JS 代码。不知道错误发生在哪里。如果它发生在 IDE 而不是 linter 命令中，则问题被错误识别。
如果我知道配置的哪个元素是问题，我会知道要覆盖哪个元素，正如我所说，我已经尝试了很多方法来尝试纠正这个问题，所以我已经尝试修复分散的无处不在，所以如果您想告诉我您想查看哪些配置，我很乐意将其添加到问题中
显然，eslint/prettier 配置，但任何其他影响问题的配置。您应该能够从头开始复制它，以便其他人也能够这样做，因此很明显哪些配置会影响它。一个回购我会有所帮助。同样，不知道你是如何得到这个错误的。问题应该清楚地说明重现它的步骤。请检查stackoverflow.com/help/how-to-ask 和stackoverflow.com/help/mcve。问题需要符合规则才能具有建设性。
没有特定的 eslint/prettier 配置，因为我假设我需要创建一些来覆盖有问题的默认值
这个问题没有特别提到你故意使用 TypeScript。如果你不这样做，@vue/prettier/@typescript-eslint 等不应该在那里。如果你这样做，那么就像答案所说的那样。

标签： vue.js eslint prettier

【解决方案1】：

我已经遇到了同样的问题，用以下方法解决它：

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

让我知道它是否适合你

【讨论】：

谢谢，所以我完全看错了位置
这实际上并不能解决问题，只是解决它。 OP 没有尝试使用 TS。