標題重寫為：提升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”：正確， “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>
設置，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,
    「窗口.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>

如果對你有用，請告訴我。