Closed
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 7.32.0
- eslint-plugin-vue version: 7.18.0
- Node version: 16.6.1
- Operating System: Windows
Please show your full configuration:
{
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module',
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
rules: {
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
},
};
What did you do?
<template>
<HelloWorld />
</template>
<script setup lang="ts">
import HelloWorld from './HelloWorld.vue';
</script>
What did you expect to happen?
I expected that the vue/component-name-in-template-casing rule would throw an error for the HelloWorld tag in the template section of my vue file because it is written in PascalCase and not kebab-case.
What actually happened?
No linting error gets thrown when writing my code as above. However when I write my code as follows an error gets thrown stating that my component is not kebab-base:
<template>
<HelloWorld />
</template>
<script lang="ts">
import HelloWorld from './HelloWorld.vue';
export default {
components: { HelloWorld },
}
</script>