Variable name shadowing with useTemplateRef does not result in TS error

[mdoesburg]

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.3

Vue version

3.5.13

TypeScript version

5.4.5

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 107.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.14.2 - ~/Library/pnpm/pnpm
    Watchman: 2022.12.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.109
    Edge: 131.0.2903.86
    Safari: 18.1.1

package.json dependencies

{
    "dependencies": {
        "@kyvg/vue3-notification": "^3.4.1",
        "@popperjs/core": "^2.11.8",
        "@sentry/vue": "7.52.1",
        "@tanstack/vue-query": "^5.61.3",
        "@tiptap/core": "^2.3.0",
        "@tiptap/extension-document": "^2.3.0",
        "@tiptap/extension-hard-break": "^2.3.0",
        "@tiptap/extension-heading": "^2.3.0",
        "@tiptap/extension-link": "^2.3.0",
        "@tiptap/extension-mention": "^2.3.0",
        "@tiptap/extension-paragraph": "^2.3.0",
        "@tiptap/extension-placeholder": "^2.3.0",
        "@tiptap/extension-text": "^2.3.0",
        "@tiptap/pm": "^2.3.0",
        "@tiptap/starter-kit": "^2.3.0",
        "@tiptap/suggestion": "^2.3.0",
        "@tiptap/vue-3": "^2.3.0",
        "@vueuse/core": "^11.3.0",
        "@vueuse/integrations": "^11.3.0",
        "@vueuse/router": "^11.3.0",
        "dayjs": "^1.11.13",
        "defu": "^6.1.4",
        "dompurify": "^3.2.1",
        "echarts": "^5.5.1",
        "fast-deep-equal": "^3.1.3",
        "graphql": "^16.9.0",
        "graphql-request": "^6.1.0",
        "iframe-resizer": "^4.3.9",
        "jwt-decode": "^4.0.0",
        "klona": "^2.0.6",
        "lodash.debounce": "^4.0.8",
        "maska": "^3.0.3",
        "mixpanel-browser": "2.54.1",
        "nanoid": "^5.0.8",
        "papaparse": "^5.4.1",
        "pinia": "^2.2.6",
        "qrcode.vue": "3.4.1",
        "regex-parser": "^2.3.0",
        "showdown": "^2.1.0",
        "sortablejs": "^1.15.4",
        "tippy.js": "^6.3.7",
        "turndown": "^7.2.0",
        "vue": "3.5.13",
        "vue-content-loader": "^2.0.1",
        "vue-echarts": "^7.0.3",
        "vue-i18n": "10.0.4",
        "vue-router": "^4.4.5",
        "vue3-perfect-scrollbar": "^2.0.0",
        "vuetify": "3.6.15"
    },
    "devDependencies": {
        "@graphql-codegen/cli": "^5.0.3",
        "@graphql-codegen/client-preset": "^4.5.1",
        "@graphql-typed-document-node/core": "^3.2.0",
        "@intlify/unplugin-vue-i18n": "6.0.0",
        "@mdi/js": "^7.4.47",
        "@rushstack/eslint-patch": "^1.10.4",
        "@sentry/vite-plugin": "2.22.6",
        "@tanstack/eslint-plugin-query": "^5.61.3",
        "@testing-library/dom": "^10.4.0",
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/user-event": "^14.5.2",
        "@testing-library/vue": "8.0.3",
        "@tsconfig/node20": "^20.1.4",
        "@types/grecaptcha": "^3.0.9",
        "@types/iframe-resizer": "^3.5.13",
        "@types/jsdom": "^21.1.7",
        "@types/lodash.debounce": "^4.0.9",
        "@types/mixpanel-browser": "^2.49.1",
        "@types/node": "^20.12.2",
        "@types/papaparse": "^5.3.15",
        "@types/showdown": "^2.0.6",
        "@types/sortablejs": "^1.15.8",
        "@types/turndown": "^5.0.5",
        "@vitejs/plugin-vue": "^5.2.0",
        "@vitest/coverage-istanbul": "^2.1.5",
        "@vitest/coverage-v8": "^2.1.5",
        "@vitest/ui": "^2.1.5",
        "@vue/eslint-config-prettier": "9.0.0",
        "@vue/eslint-config-typescript": "13.0.0",
        "@vue/test-utils": "^2.4.6",
        "@vue/tsconfig": "^0.6.0",
        "cypress": "^13.13.2",
        "dotenv": "^16.4.5",
        "eslint": "8.57.1",
        "eslint-import-resolver-typescript": "^3.6.3",
        "eslint-plugin-cypress": "^3.4.0",
        "eslint-plugin-import": "2.29.1",
        "eslint-plugin-simple-import-sort": "^12.1.1",
        "eslint-plugin-tsdoc": "^0.4.0",
        "eslint-plugin-vue": "^9.31.0",
        "graphql-config": "^5.1.3",
        "husky": "^9.1.7",
        "jsdom": "^24.1.1",
        "lint-staged": "^15.2.10",
        "msw": "2.4.3",
        "npm-run-all2": "^7.0.1",
        "postcss": "^8.4.49",
        "postcss-html": "^1.7.0",
        "prettier": "3.3.3",
        "prettier-plugin-jsdoc": "^1.3.0",
        "resize-observer-polyfill": "^1.5.1",
        "rollup-plugin-visualizer": "^5.12.0",
        "sass": "1.77.8",
        "start-server-and-test": "^2.0.8",
        "stylelint": "^16.10.0",
        "stylelint-config-prettier-scss": "^1.0.0",
        "stylelint-config-recommended-vue": "^1.5.0",
        "stylelint-config-standard-scss": "^13.1.0",
        "typescript": "~5.4.3",
        "vite": "^5.4.11",
        "vite-plugin-graphql-codegen": "^3.4.0",
        "vite-plugin-vuetify": "2.0.4",
        "vitest": "^2.1.5",
        "vitest-canvas-mock": "^0.3.3",
        "vue-component-type-helpers": "2.1.10",
        "vue-tsc": "2.1.10"
    }
}

Steps to reproduce

1. Have the following ESLint rule set to error or warn:

• @typescript-eslint/no-unused-vars

2. Create the following component:

<script setup lang="ts">
import { useTemplateRef } from 'vue';

const test = useTemplateRef('test');
</script>

<template>
    <div ref="test">Hello World!</div>
</template>

3. Don't see a warning/error even though the test variable is not used (if you reload VSCode it does show as greyed out/unused but still without a warning/error):

4. Change the var name to something that doesn't mirror the ref name, and correctly get a warning/error:

What is expected?

I expect to see a warning or error if the variable is not used.

What is actually happening?

You don't see a warning or error if the variable is not used if you mirror the ref name.

Link to minimal reproduction

No response

Any additional comments?

No response

[KazariEX]

You can try https://eslint.vuejs.org/rules/no-unused-refs.html