some kebab-case components name caused eslintno-unused-vars and @typescript-eslint/no-unused-vars #258
Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- I'm using eslint-plugin-vue.
- I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
- I have tried restarting my IDE and the issue persists.
- I have updated to the latest version of the packages.
What version of ESLint are you using?
8.57.1
What version of eslint-plugin-vue and vue-eslint-parser are you using?
- vue-eslint-parser@9.4.3
- eslint-plugin-vue@9.33.0
What did you do?
Configuration
{ "extends": [ "plugin:@typescript-eslint/recommended", "eslint-config-airbnb-base", "@vue/typescript/recommended", "plugin:vue/vue3-recommended", "plugin:vue-scoped-css/base", "plugin:prettier/recommended" ], "env": { "browser": true, "node": true, "jest": true, "es6": true }, "globals": { "defineProps": "readonly", "defineEmits": "readonly" }, "plugins": ["vue", "@typescript-eslint", "simple-import-sort"], "parserOptions": { "parser": "@typescript-eslint/parser", "sourceType": "module", "allowImportExportEverywhere": true, "ecmaFeatures": { "jsx": true } }, "settings": { "import/extensions": [".js", ".jsx", ".ts", ".tsx"] }, "rules": { "no-console": "off", "no-continue": "off", "no-restricted-syntax": "off", "no-plusplus": "off", "no-param-reassign": "off", "no-shadow": "off", "guard-for-in": "off", "import/extensions": "off", "import/no-unresolved": "off", "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", "import/first": "off", // https://github.com/vuejs/vue-eslint-parser/issues/58 "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "vue/first-attribute-linebreak": 0, "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "no-unused-vars": [ "error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/ban-ts-comment": "off", "@typescript-eslint/ban-types": "off", "class-methods-use-this": "off", "simple-import-sort/imports": "error", "simple-import-sort/exports": "error" }, "overrides": [ { "files": ["*.vue"], "rules": { "vue/component-name-in-template-casing": [2, "kebab-case"], "vue/require-default-prop": 0, "vue/multi-word-component-names": 0, "vue/no-reserved-props": 0, "vue/no-v-html": 0, "vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }] } }, { "files": ["*.ts", "*.tsx"], // https://github.com/typescript-eslint eslint-recommended "rules": { "constructor-super": "off", // ts(2335) & ts(2377) "getter-return": "off", // ts(2378) "no-const-assign": "off", // ts(2588) "no-dupe-args": "off", // ts(2300) "no-dupe-class-members": "off", // ts(2393) & ts(2300) "no-dupe-keys": "off", // ts(1117) "no-func-assign": "off", // ts(2539) "no-import-assign": "off", // ts(2539) & ts(2540) "no-new-symbol": "off", // ts(2588) "no-obj-calls": "off", // ts(2349) "no-redeclare": "off", // ts(2451) "no-setter-return": "off", // ts(2408) "no-this-before-super": "off", // ts(2376) "no-undef": "off", // ts(2304) "no-unreachable": "off", // ts(7027) "no-unsafe-negation": "off", // ts(2365) & ts(2360) & ts(2358) "no-var": "error", // ts transpiles let/const to var, so no need for vars any more "prefer-const": "error", // ts provides better types with const "prefer-rest-params": "error", // ts provides better types with rest args over arguments "prefer-spread": "error", // ts transpiles spread to apply, so no need for manual apply "valid-typeof": "off" // ts(2367) } } ] } <!-- 1_PascalCase in template works fine --> <!-- eslint-disable-next-line vue/component-name-in-template-casing --> <EditModal :data="editModal" /> <!-- 2_kebab-case in template works bad --> <create-modal :data="createModal" /> </t-space> </t-config-provider> </template> <script setup lang="ts"> import { AddIcon, CloudDownloadIcon, CloudUploadIcon, DiscountIcon, JumpIcon } from 'tdesign-icons-vue-next'; import { ref } from 'vue'; import TDesignLogo from '../public/tdesign-logo.svg'; import ViteLogo from './assets/svg/vite-logo.svg'; // problem there import CreateModal from './components/create-modal/index.vue'; import EditModal from './components/edit-modal/index.vue'; // same variable name but different case const editModal = ref({}); const createModal = ref({});What did you expect to happen?
What actually happened?
Link to Minimal Reproducible Example
https://github.com/ngyyuusora/vue-compname-bug-report-/blob/main/src/App.vue
Additional comments
The problem maybe a matter of unhealthy variable style: Same variable name but different case.
In runtime, code works without confusing problem but eslint. Lint thinks 'create-modal /' in template is using createModal not CreateModal in script.
I read vue's style guide, it doesn't mention style in this case. Not sure if this is a parser issus or a code style issue that should be avoided. If this is a style issue, please close it and I will seek to documention.