Eslint-plugin-vue: feat: custom-event-name-casing custom casing

[privatenumber]

Extension of this bug report: https://github.com/vuejs/eslint-plugin-vue/issues/1250

Request

For the ability to customize what kind of casing should be enforced on event names.

Use case

Name spacing

In my codebase we namespace events using : with the component name for frictionless composability. That way, when composing components, there would be no collision in emitted events. (eg. input:update)

For example, a custom Input component would emit input:update, which triggers the new v-model value (not to takeover native event names with different values). There could be another component, for example Search, that uses this Input component and emit another "update" event with more data via search:update.

camelCase in Vue 3 docs

With Vue v3, v-model replaces .sync and their docs seem to contain a lot of examples using camelCase in event names.

(This is pretty confusing considering they still recommend event names be case insensitive (lower case) at the top.)

If this isn't a mistake, then surely, some people would want to use camelCase in their event names. (https://github.com/vuejs/docs-next/issues/308)

Edit:
Changing to v-model.prop-name seems to be necessary in a non-compiled environment (haven't tested in a compiled one). Both update:propName and update:prop-name seem to work. Codepen

Proposed API

Just some ideas I had:

• ignoreCharacters: [':']
• allowCharacters: [':']
• allowNamespace: true
• allowDelimiters: ':'

[ota-meshi]

Thank you for your proposal.

However, it seems to me that the options you have proposed are a bit limited.

The following is my idea.

Add the ignorePatterns option. You can specify an array of regular expressions with the ignorePatterns option.
Ignores event names whose names match the specified pattern from this rule's report.

e.g. "ignorePatterns": ["^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$"]

What do you think? Does the ignorePatterns option solve your needs?

[privatenumber]

Yeah that works! Thank you @ota-meshi 🙏

[jacekkarczmarczyk]

Vuetify also uses : syntax for events, for example click:row, so that would be a great addition

[bitencode]

👍 Vue itself uses examples of update:my-prop to distinguish which prop is being updated.

[ota-meshi]

@bitencode custom-event-name-casing rule already ignores update:my-prop.
If update:my-prop is reported as an error in your environment, could you open a new issue?

[bitencode]

My apologies @ota-meshi, it does ignore that specific use case. When I upgraded to the new version of this plugin we had hundreds of errors about "must be kebab-case" that I missed the fact that using update:<prop-name> events were not in the list of errors.
We took the original Vue examples as being a good way of specifying a resource or context and an action, so we update props with that syntax, and then for lower level components we emit events similar to Vuetify and use events like change:sort-order, change:per-page, etc... Higher level components use higher concept events to notify their parents of what they are doing - like video:start, video:stop, etc... so all those events are resulting in lint errors. For now I have just disabled the rule.
Thank you