标题重写为：提升ESLint循环错误的美观程度

Question

<p>我正在创建一个 vue 组件</p> <p>但我收到以下错误</p> <pre class="brush:php;toolbar:false;">Type annotations can only be used in TypeScript files.</pre> <p>如果我删除类型子句，我就会得到</p> <pre class="brush:php;toolbar:false;">Missing return type on function.</pre> <p>组件看起来像：</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>我猜我在 prettier 和 eslints 配置中存在冲突，因此一个将 vue 视为 TS 兼容，而另一个则不然</p> <p>我已经尝试了各种调整和更改，但到目前为止没有任何区别，所以有人可以指出我正确的配置来解决这个问题吗？</p> <p>tsconfig.json{ “编译器选项”：{ “目标”：“esnext”， “模块”：“esnext”， “严格”：真实， "jsx": "保留", “导入助手”：正确， "moduleResolution": "节点", “experimentalDecorators”：正确， “skipLibCheck”：正确， “esModuleInterop”：true， “allowSyntheticDefaultImports”：true， “源地图”：正确， "baseUrl": ".", “类型”：[ “webpack-env” ], “路径”：{ “@/*”：[ “源代码/*” ] }, “库”：[ “es下一个”， “多姆”， “dom.iterable”， “编剧” ] }, “包括”： [ “src/**/*.ts", “源代码/**/*.tsx”, “src/**/*.vue", “测试/**/*.ts”, “测试/**/*.tsx” ], “排除”： [ “节点模块” ] }</pre> <p>babel.config.js</p>

module.exports = {
  预设：[“@vue/cli-plugin-babel/preset”]，
};</pre>
<p>设置，json{
    "editor.insertSpaces": false,
    "editor.minimap.enabled": false,
    "文件.eol": "n",
    "workbench.sideBar.location": "右",
    "php-cs-fixer.executablePath": "${extensionPath}\php-cs-fixer.phar",
    “发射”： {
        “配置”：[]，
        “化合物”：[]
    },
    "debug.javascript.usePreview": false,
    “窗口.zoomLevel”：3，
    “eslint.format.enable”：true
}</pre>
<p>package.json</p>
{
  “依赖项”：{
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    “vue-class-component”：“^8.0.0-0”
  },
  “开发依赖项”：{
    "@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”
  },
  “eslint配置”：{
    “根”：正确，
    “环境”：{
      “节点”：真
    },
    “延伸”：[
      “插件：vue/vue3-essential”，
      “eslint：推荐”，
      “@vue/typescript/推荐”，
      “@vue/更漂亮”，
      “@vue/prettier/@typescript-eslint”
    ],
    “解析器选项”：{
      “ecma版本”：2020
    },
    “规则”：{}
  },
  “浏览器列表”：[
    “>1%”，
    “最后两个版本”，
    “没死”
  ]
}</pre>
<p><br />></p>            

Answer 1

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

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

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