useSvelteShorthandDirective (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useSvelteShorthandDirective
This rule has a safe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/shorthand-directive

How to configure

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

Description

Enforce the shorthand syntax for Svelte bind:, class:, and style: directives.

When the value of one of these directives is a variable with the same name as the directive, the value can be omitted: bind:value={value} is the same as bind:value. The shorthand avoids repeating the name and keeps templates shorter.

Examples

Invalid

1
<input bind:value={value} />

code-block.svelte:1:8 lint/nursery/useSvelteShorthandDirective  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This directive can use the shorthand syntax.
  
  > 1 │ <input bind:value={value} />
      │        ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The value is a variable with the same name as the directive, so repeating it is redundant.
  
  ℹ 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.
  
  ℹ Safe fix: Use the shorthand syntax.
  
    1   │ - <input·bind:value={value}·/>
      1 │ + <input·bind:value·/>
    2 2 │

1
<div class:active={active}></div>

code-block.svelte:1:6 lint/nursery/useSvelteShorthandDirective  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This directive can use the shorthand syntax.
  
  > 1 │ <div class:active={active}></div>
      │      ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The value is a variable with the same name as the directive, so repeating it is redundant.
  
  ℹ 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.
  
  ℹ Safe fix: Use the shorthand syntax.
  
    1 │ <div·class:active={active}></div>
      │                  ---------

1
<div style:color={color}></div>

code-block.svelte:1:6 lint/nursery/useSvelteShorthandDirective  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This directive can use the shorthand syntax.
  
  > 1 │ <div style:color={color}></div>
      │      ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The value is a variable with the same name as the directive, so repeating it is redundant.
  
  ℹ 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.
  
  ℹ Safe fix: Use the shorthand syntax.
  
    1 │ <div·style:color={color}></div>
      │                 --------

Valid

1
<input bind:value />
2
<input bind:value={name} />
3
<div class:active></div>
4
<div class:active={isActive}></div>
5
<div style:color></div>
6
<div style:color="red"></div>