Skip to content

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

Closed
@FloEdelmann

Description

@FloEdelmann

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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions