noNestedTemplateLiterals (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noNestedTemplateLiterals
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as sonarjs/no-nested-template-literals

How to configure

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

Description

Disallow template literals inside other template literals.

Template literals (strings written with backticks, like Hello ${name}) make it easy to build strings. When one template literal is written inside the ${...} part of another, the code becomes hard to read, because it is no longer clear which backtick closes which string.

Move the inner template literal into its own variable instead.

A nested template literal is allowed when it starts on a different line than the outer template literal starts, and ends on a different line than the outer template literal ends.

Examples

Invalid

1
const message = `I have ${color ? `${count} ${color}` : count} apples`;

code-block.js:1:35 lint/nursery/noNestedTemplateLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This template literal is nested inside another template literal.
  
  > 1 │ const message = `I have ${color ? `${count} ${color}` : count} apples`;
      │                                   ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ This is the outer template literal.
  
  > 1 │ const message = `I have ${color ? `${count} ${color}` : count} apples`;
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Nested template literals are hard to read, because it is unclear which backtick ends which string.
  
  ℹ Move the inner template literal into a separate variable.
  
  ℹ 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.

1
const message = html`<p>${`${count} apples`}</p>`;

code-block.js:1:27 lint/nursery/noNestedTemplateLiterals ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This template literal is nested inside another template literal.
  
  > 1 │ const message = html`<p>${`${count} apples`}</p>`;
      │                           ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ This is the outer template literal.
  
  > 1 │ const message = html`<p>${`${count} apples`}</p>`;
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Nested template literals are hard to read, because it is unclear which backtick ends which string.
  
  ℹ Move the inner template literal into a separate variable.
  
  ℹ 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.

Valid

1
const apples = color ? `${count} ${color}` : count;
2
const message = `I have ${apples} apples`;
3

4
const list = `
5
  ${items.map((item) => `<li>${item}</li>`)}
6
`;