Eslint: Custom event name 'bv::toggle::collapse' must be kebab-case vue/custom-event-name-casing #5916
Description
Describe the bug
I updated eslint-plugin-vue from v6.2.2 to v7.0.0 and found that the new version adds a new rule vue/custom-event-name-casing which does not like such names as bv::toggle::collapse, so from the box I see errors in the code, such as:
error in ./src/components/ThePlanner_1_3_Schedule_Input.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/home/antonio/www/activewizards/api-freshdesk-arctic/frontend/src/components/ThePlanner_1_3_Schedule_Input.vue
403:24 error Custom event name 'bv::toggle::collapse' must be kebab-case vue/custom-event-name-casing
✖ 1 problem (1 error, 0 warnings)
Here is the rule details.
Steps to reproduce the bug
- Install
eslint-plugin-vuev7.0.0+; - Run
npm run serve; - Add for example the next method:
sidebarClose () {
this.$root.$emit('bv::toggle::collapse', 'tour-planner-sidebar')
}
- Save the code;
- Check terminal for the error.
Expected behavior
I expect to see a terminal without errors :)
Versions
Libraries:
- BootstrapVue: 2.17.3
- Vue: 2.6.12
- eslint-plugin-vue: 7.0.0
Possible solution
- Find (or create)
.eslintrc.jsfile inside your project; - Add the next rule
'vue/custom-event-name-casing': 'off'
Example of my file:
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/recommended',
'@vue/standard'
],
rules: {
'vue/custom-event-name-casing': 'off', // <<<<---- HERE IS OUR RULE
'vue/no-mutating-props': 'off',
'no-console': 'off',
'no-debugger': 'off',
'no-multiple-empty-lines': [
'error',
{
max: 2
}
],
'padded-blocks': [
'error',
{
blocks: 'never'
}
],
'vue/max-attributes-per-line': [
'error',
{
singleline: 5,
multiline: {
max: 1,
allowFirstLine: true
}
}
]
},
parserOptions: {
parser: 'babel-eslint'
}
}