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: 8.57.0
- eslint-plugin-vue version: 9.24.0
- Vue version: 3.4.21
- Node version: 18.18.0
- Operating System: Windows 10
Please show your full configuration:
import pluginVue from 'eslint-plugin-vue';
import configPrettier from 'eslint-config-prettier';
export default [
...pluginVue.configs['flat/recommended'],
configPrettier,
{
rules: {
'vue/require-default-prop': 'off',
'vue/attribute-hyphenation': ['error', 'never'],
'vue/custom-event-name-casing': ['error', 'camelCase'],
// 'vue/custom-event-name-casing': ['error', 'kebab-case'],
'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
},
},
];
What did you do?
<script setup>
const emit = defineEmits(['update:model-value',]);
const handleEmitClick = () => {
emit('update:model-value', 'new foo');
};
</script>
<template>
<button type="button" @click="$emit('update:model-value', 'new foo')">
Emit
</button>
</template>
What did you expect to happen?
emit
and $emit
calls with update:kebab-case
like event names should be reported because of wrong event name casing but no error is reported.
side note: vue/v-on-event-hyphenation
are able to report such event names as error as expected.
What actually happened?
Nothing, no error is reported.
(It seems the rule only works with plain kebab-case
/camelCase
event names.)
Repository to reproduce this issue
Repo with minimal reproduction
Just open a new terminal or terminate dev server in current terminal then run npm run lint
to see the problem. Feel free to change the eslint rule setting to kebab-case
it won't report errors either.