useVueConsistentVBindStyle (HTML)

Language HTML

Summary

• Rule available since: v2.3.11
• Diagnostic Category: lint/style/useVueConsistentVBindStyle
• This rule is recommended, meaning it is enabled by default.
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/v-bind-style

How to configure

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "useVueConsistentVBindStyle": "error"
      }
    }
  }
}

Description

Enforce a consistent style for v-bind in Vue templates.

Examples

Invalid

<div v-bind:foo="bar" />

code-block.vue:1:6 lint/style/useVueConsistentVBindStyle  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Use shorthand ':' syntax instead of v-bind.
  
  > 1 │ <div v-bind:foo="bar" />
      │      ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ This project prefers to use shorthand syntax for v-bind.
  
  ℹ Unsafe fix: Use the shorthand ':' syntax instead.
  
    1   │ - <div·v-bind:foo="bar"·/>
      1 │ + <div·:foo="bar"·/>
    2 2 │   
  

Valid

<div :foo="bar" />
<div v-bind="props" />

Options

style

Configures the preferred directive style. Default: "shorthand".

biome.json

{
  "linter": {
    "rules": {
      "style": {
        "useVueConsistentVBindStyle": {
          "level": "on",
          "options": {
            "style": "longhand"
          }
        }
      }
    }
  }
}

Invalid

<div :foo="bar" />

code-block.vue:1:6 lint/style/useVueConsistentVBindStyle  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Use longhand 'v-bind' syntax instead of ':'.
  
  > 1 │ <div :foo="bar" />
      │      ^^^^^^^^^^
    2 │ 
  
  ℹ This project prefers to use longhand syntax for v-bind.
  
  ℹ Unsafe fix: Use longhand 'v-bind' syntax instead.
  
    1   │ - <div·:foo="bar"·/>
      1 │ + <div·v-bind:foo="bar"·/>
    2 2 │   
  

Valid

<div v-bind:foo="bar" />

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases