eslint-plugin-vue
eslint-plugin-vue copied to clipboard
vuejs
[Rule proposal] Warn when referencing props without `props.` prefix in functional component template
Please describe what the rule should do:
When I use functional components with templates, I very often forget to reference props through props object (props.user instead of user). This leads to a lot of lost time in debugging until I find out because there is no warning or error thrown to indicate this issue.
What category should the rule belong to?
- [ ] 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 should warn about:
<template functional>
<div>{{ username }}</div>
</template>
<script>
export default {
functional: true,
props: {
username: String,
}
}
</script>
should be
<div>{{ props.username }}</div>
Additional context
Hi @tyankatsu0105. I like this rule of finding mistakes.
However, the option of props is optional, and it may be difficult to determine that it is a prop.
https://vuejs.org/v2/guide/render-function.html#Functional-Components
e.g.
<template functional>
<div>{{ username }}</div>
</template>
<script>
export default {
functional: true,
// props: {
// username: String,
// }
}
</script>
Instead, it may be possible to report access other than the context properties (props, children, slots and more).
@ota-meshi
Since Vue3, <template functional> style will not be supported.
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md
The rule that fulfills this issue's request looks like useless.
I know that, but it doesn't stop supporting Vue 2, so it useful for some users. However, I think this rule has a lower priority than the rules that are useful to both Vue 2 and 3 users.
@ota-meshi Thanks for your quick response!!!
OK. I will work on this issue if I have time😉