Description
Please describe what the rule should do:
Since Vue v2.1.0, Vue.nextTick
and vm.$nextTick
return a Promise if no callback is provided. So both of the following are valid:
Vue.nextTick(callback)
Vue.nextTick().then()
/await Vue.nextTick()
Or inside components:
this.$nextTick(callback)
this.$nextTick().then()
/await this.$nextTick()
There should be a rule that enforces one of the styles to make the codebase more consistent. I suggest that the Promise-style is the default of this rule, because it makes the code more concise and is generally well supported as of now.
However, enforcing the await
or .then()
style is out of scope for this plugin, there is already the eslint-plugin-promise
plugin with the promise/prefer-await-to-then
rule.
What category should the rule belong to?
[X] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
// "vue/next-tick-style": "warn"
// "vue/next-tick-style": ["warn", "promise"]
// BAD:
Vue.nextTick(() => callback())
Vue.nextTick(callback)
this.$nextTick(() => callback())
this.$nextTick(callback)
// GOOD:
Vue.nextTick().then(() => callback())
await Vue.nextTick(); callback()
this.$nextTick().then(() => callback())
await this.$nextTick(); callback()
// "vue/next-tick-style": ["warn", "callback"]
// BAD:
Vue.nextTick().then(() => callback())
await Vue.nextTick(); callback()
this.$nextTick().then(() => callback())
await this.$nextTick(); callback()
// GOOD:
Vue.nextTick(() => callback())
Vue.nextTick(callback)
this.$nextTick(() => callback())
this.$nextTick(callback)