useVueNextTickPromise (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.15
Diagnostic Category: lint/nursery/useVueNextTickPromise
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/next-tick-style

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueNextTickPromise": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforces Promise syntax when using Vue nextTick.

Vue nextTick returns a Promise when no callback is passed. Promise syntax composes better with await and keeps asynchronous control flow explicit.

Examples

Invalid

1
<script>
2
import { nextTick } from "vue";
3

4
nextTick(() => {
5
  // ...
6
});
7
</script>

code-block.vue:4:1 lint/nursery/useVueNextTickPromise ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Vue `nextTick` was called with a callback.
  
    2 │ import { nextTick } from "vue";
    3 │ 
  > 4 │ nextTick(() => {
      │ ^^^^^^^^^^^^^^^^
  > 5 │   // ...
  > 6 │ });
      │ ^^
    7 │ </script>
    8 │ 
  
  ℹ Promise syntax composes better with `await` and keeps asynchronous control flow explicit.
  
  ℹ Call `nextTick` without a callback, then await it or chain `.then()` instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
import { nextTick } from "vue";
3

4
await nextTick();
5
// ...
6
</script>