Skip to content
Biome
Docs Enterprise Playground
Blog

useTemplate

Diagnostic Category: lint/style/useTemplate

Since: v1.0.0

Sources:

Description

Section titled Description

Prefer template literals over string concatenation.

Examples

Section titled Examples

Invalid

Section titled 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

Section titled Valid
let s = "foo" + "bar" + `baz`;
let s = `value: ${1}`;

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "style": {
        "useTemplate": "error"
      }
    }
  }
}
Section titled Related links