useVueRenderReturn (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueRenderReturn
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/require-render-return

How to configure

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

Description

Require the render function of a Vue component to return a value.

A render function describes what a component displays, and Vue uses the value it returns. When the function ends without a return statement, or uses return; without a value, the component renders nothing.

The rule reports a render function when at least one way through the function ends without returning a value.

Examples

Invalid

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

4
export default {
5
  render() {
6
    if (this.visible) {
7
      return h("div", "hello");
8
    }
9
  },
10
};
11
</script>

code-block.vue:5:3 lint/nursery/useVueRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This render function doesn't always return a value.
  
    4 │ export default {
  > 5 │   render() {
      │   ^^^^^^
    6 │     if (this.visible) {
    7 │       return h("div", "hello");
  
  ℹ Vue displays what the render function returns. When the function ends without returning a value, the component displays nothing.
  
  ℹ Return a value at the end of every path through the function. Return null if the component should display nothing.
  
  ℹ 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.

1
<script>
2
export default {
3
  render: function () {
4
    return;
5
  },
6
};
7
</script>

code-block.vue:3:3 lint/nursery/useVueRenderReturn ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This render function doesn't always return a value.
  
    1 │ <script>
    2 │ export default {
  > 3 │   render: function () {
      │   ^^^^^^
    4 │     return;
    5 │   },
  
  ℹ Vue displays what the render function returns. When the function ends without returning a value, the component displays nothing.
  
  ℹ Return a value at the end of every path through the function. Return null if the component should display nothing.
  
  ℹ 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 { h } from "vue";
3

4
export default {
5
  render() {
6
    if (this.visible) {
7
      return h("div", "hello");
8
    }
9
    return null;
10
  },
11
};
12
</script>