noJsxLeakedDollar

Ce contenu n’est pas encore disponible dans votre langue.

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noJsxLeakedDollar
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- react
Sources:
- Same as react-jsx/no-leaked-dollar
- Same as @eslint-react/jsx-no-leaked-dollar

How to configure

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

Description

Flags text nodes with a trailing $ before a JSX expression.

This can happen when refactoring from a template literal to JSX and forgetting to remove the dollar sign. This results in an unintentional $ being rendered as text in the output.

1
function MyComponent({ user }) {
2
  return `Hello ${user.name}`;
3
}

When refactored to JSX, it might look like this:

1
function MyComponent({ user }) {
2
  return <>Hello ${user.name}</>;
3
}

However, the $ before {user.name} is unnecessary and will be rendered as text in the output.

Examples

Invalid

1
function MyComponent({ user }) {
2
  return <div>Hello ${user.name}</div>;
3
}

code-block.jsx:2:21 lint/nursery/noJsxLeakedDollar  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Possible unintentional ’$’ before a JSX expression.
  
    1 │ function MyComponent({ user }) {
  > 2 │   return <div>Hello ${user.name}</div>;
      │                     ^
    3 │ }
    4 │ 
  
  ℹ This ’$’ will be rendered as text. Remove the ’$’ from the text node or add a suppression if it is intentional.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove dollar sign.
  
    2 │ ··return·<div>Hello·${user.name}</div>;
      │                     -

1
function MyComponent({ user }) {
2
  return <div>${user.name} is your name</div>;
3
}

code-block.jsx:2:15 lint/nursery/noJsxLeakedDollar  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Possible unintentional ’$’ before a JSX expression.
  
    1 │ function MyComponent({ user }) {
  > 2 │   return <div>${user.name} is your name</div>;
      │               ^
    3 │ }
    4 │ 
  
  ℹ This ’$’ will be rendered as text. Remove the ’$’ from the text node or add a suppression if it is intentional.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove dollar sign.
  
    2 │ ··return·<div>${user.name}·is·your·name</div>;
      │               -

Valid

1
function MyComponent({ user }) {
2
  return <div>Hello {user.name}</div>;
3
}

1
// A lone `$` before a single expression is treated as intentional (e.g. a price).
2
function MyComponent({ price }) {
3
  return <div>${price}</div>;
4
}