Variable name shadowing with useTemplateRef does not result in TS error #5031
Description
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.1package.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
- Have the following ESLint rule set to
errororwarn:
@typescript-eslint/no-unused-vars
- 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>- Don't see a warning/error even though the
testvariable is not used (if you reload VSCode it does show as greyed out/unused but still without a warning/error):
- 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