useTemplate (JavaScript)

Language JavaScript (and super languages)

Summary

• Rule available since: v1.0.0
• Diagnostic Category: lint/style/useTemplate
• This rule is recommended, meaning it is enabled by default.
• This rule has an unsafe fix.
• The default severity of this rule is information.
• Sources:
  • Same as prefer-template

How to configure

biome.json

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

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·=·`${foo}baz`;
    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·=·`${1·+·2}foo${3}`;
    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·=·`${1·*·2}foo`;
    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·=·`${1}foo${2}barbaz${3}`;
    2 2 │   
  

Valid

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

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

Related links

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