useTemplate

Diagnostic Category: lint/style/useTemplate

JavaScript (and super languages)

Since: v1.0.0

Note

• This rule is recommended by Biome. A diagnostic error will appear when linting your code.
• This rule has an unsafe fix.

Sources:

• Same as: prefer-template

Description

Prefer template literals over string concatenation.

Examples

Invalid

const s = foo + "baz";

code-block.js:1:11 lint/style/useTemplate  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Template literals are preferred over string concatenation.
  
  > 1 │ const s = foo + “baz”;
      │           ^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Use a template literal.
  
    1   │ - const·s·=·foo·+·“baz”;
      1 │ + const·s·=·</strong></span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;">b</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">z</span><span style="color: MediumSeaGreen;"><strong>;
    2 2 │   
  

const s = 1 + 2 + "foo" + 3;

code-block.js:1:11 lint/style/useTemplate  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Template literals are preferred over string concatenation.
  
  > 1 │ const s = 1 + 2 + “foo” + 3;
      │           ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Use a template literal.
  
    1   │ - const·s·=·1·+·2·+·“foo”·+·3;
      1 │ + const·s·=·</strong></span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">1</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">2</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">3</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;"><strong>;
    2 2 │   
  

const s = 1 * 2 + "foo";

code-block.js:1:11 lint/style/useTemplate  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Template literals are preferred over string concatenation.
  
  > 1 │ const s = 1 * 2 + “foo”;
      │           ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Use a template literal.
  
    1   │ - const·s·=·1·*·2·+·“foo”;
      1 │ + const·s·=·</strong></span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">1</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">&#42;</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">2</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>;
    2 2 │   
  

const s = 1 + "foo" + 2 + "bar" + "baz" + 3;

code-block.js:1:11 lint/style/useTemplate  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Template literals are preferred over string concatenation.
  
  > 1 │ const s = 1 + “foo” + 2 + “bar” + “baz” + 3;
      │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Use a template literal.
  
    1   │ - const·s·=·1·+·“foo”·+·2·+·“bar”·+·“baz”·+·3;
      1 │ + const·s·=·</strong></span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">1</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">2</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;"><strong>b</strong></span><span style="color: MediumSeaGreen;"><strong>a</strong></span><span style="color: MediumSeaGreen;"><strong>r</strong></span><span style="color: MediumSeaGreen;"><strong>b</strong></span><span style="color: MediumSeaGreen;"><strong>a</strong></span><span style="color: MediumSeaGreen;"><strong>z</strong></span><span style="color: MediumSeaGreen;"><strong>$</strong></span><span style="color: MediumSeaGreen;"><strong>&#123;</strong></span><span style="color: MediumSeaGreen;">3</span><span style="color: MediumSeaGreen;"><strong>&#125;</strong></span><span style="color: MediumSeaGreen;"><strong>;
    2 2 │   
  

Valid

let s = "foo" + "bar" + `baz`;

let s = `value: ${1}`;

How to configure

biome.json

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

Related links

• Disable a rule
• Configure the rule fix
• Rule options