javascript - 在使用 composition API 和 TypeScript 的 vue3 SFC 文件中，對所有已定義的數據（該文件有導入的模板文件）出現 ESLint no-unused-vars 錯誤

我有一些 .vue SFC 文件正在使用 <script setup> 語法。

這裡有一個我意思的簡化範例：

Person.vue

<script setup lang="ts">
import { ref } from "vue";
const person = ref(0);
</script>
<template src="./Person.html"></template>

Person.html

{{ person }}

在那些檔案中，我正在定義資料，然後，與其將模板 HTML 放在檔案本身內，我使用 src 匯入（根據官方文件）將 HTML 放在一個單獨的檔案中。

雖然程式碼運行良好，但問題是我不斷收到類似以下的 ESLint 錯誤：

ESLint：'person' 被賦值但從未使用。(@typescript-eslint/no-unused-vars)

如果我改為直接將 HTML 放入 .vue 文件中，這個問題就完全解決了：

Person.vue

<script setup lang="ts">
import { ref } from "vue";
const person = ref(0);
</script>
<template>
  {{ person }}
</template>

有沒有辦法讓 ESLint 解析導入的模板，並確定「person」確實是一個已使用的變數？

供參考，這是我的 .eslintrc.cjs 檔案：

require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parser: "vue-eslint-parser",
  overrides: [
    {
      files: ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
  ],
};

任何幫助都將不勝感激！