Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rule suggestion: vue/next-tick-style #1318

Closed
FloEdelmann opened this issue Oct 6, 2020 · 0 comments · Fixed by #1400
Closed

Rule suggestion: vue/next-tick-style #1318

FloEdelmann opened this issue Oct 6, 2020 · 0 comments · Fixed by #1400

Comments

@FloEdelmann
Copy link
Member

FloEdelmann commented Oct 6, 2020

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants