Description
Please describe what the rule should do:
Ensure that developers emit events that are compatible with specifying listeners in a DOM-based template.
What category of rule is this? (place an "X" next to just one item)
[ ] Enforces code style
[x] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)
Provide 2-3 code examples that this rule will warn about:
methods: {
clicked() {
this.$emit("userClickedButton");
},
clicked() {
this.$emit("Clicked");
},
clicked() {
this.$emit("BUTTON_CLICKED");
},
},...
<body>
<div id="app">
<child-comp @userClickedButton="doSomething"></child-comp>
</div>
</body>Why should this rule be included in ESLint (instead of a plugin)?
If a component emits an event that includes a capital letter and you instantiate that component within an SFC or string template, you can use the @eventName / v-on:eventName attribute successfully to capture that event.
However, if you instantiate the component from within a DOM-based template, there is no way to capture the event. For props, Vue translates automatically between pascalCase and kebab-case, but it doesn't do so for events. Events simply won't be captured unless the listener attribute matches the emitted event string exactly.
As a result, component authors should be warned when they are creating events that can't be listened for from a DOM-based template. While I don't use DOM templates (I use SFCs almost exclusively), they are used quite often by new Vue developers, or developers just trying to play with a component.
Since this falls under the "silent failure" category, it's pretty frustrating both for the user and the component developer, but a rule to flag it during linting would be fairly simple to create.