Tengo varios archivos .vue SFC que usan la sintaxis <script setup> .

He aquí un ejemplo simplificado de lo que quiero decir:

Persona.vue

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

Persona.html

 {{ person }}

En esos archivos, estoy definiendo los datos y luego, en lugar de tener la plantilla HTML en el archivo en sí, estoy usando una importación src (según la documentación oficial ) para tener el HTML en un archivo separado.

Si bien el código funciona bien, el problema es que sigo recibiendo errores de ESLint similares a:

ESLint: a 'persona' se le asigna un valor pero nunca se usa.(@typescript-eslint/no-unused-vars)

Este problema se resuelve por completo si, en cambio, coloco el HTML directamente en el archivo .vue:

Persona.vue

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

¿Hay alguna forma de que ESLint analice la plantilla importada y determine que "persona" es de hecho una var usada?

Como referencia, aquí está mi archivo .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"], }, ], };

¡Cualquier ayuda será apreciada!