some kebab-case components name caused eslintno-unused-vars and @typescript-eslint/no-unused-vars

[ngyyuusora]

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.

[ykirshov]

I have the same problem, some components are not recognized by eslint