useConsistentCurlyBraces

Diagnostic Category: lint/nursery/useConsistentCurlyBraces

JSX and TSX

Since: v1.8.2

Sources:

Inspired from: react/jsx-curly-brace-presence

This rule enforces consistent use of curly braces inside JSX attributes and JSX children.

For situations where JSX expressions are unnecessary, please refer to the React doc and this page about JSX gotchas.

This rule will check for and warn about unnecessary curly braces in both JSX props and children.

Examples

Invalid

<Foo>{'Hello world'}</Foo>

code-block.jsx:1:6 lint/nursery/useConsistentCurlyBraces  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Should not have curly braces around expression.
  
  > 1 │ <Foo>{‘Hello world’}</Foo>
      │      ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ JSX child does not need to be wrapped in curly braces.
  
  ℹ Unsafe fix: Remove curly braces around the expression.
  
    1 │ <Foo>{‘Hello·world’}</Foo>
      │      --           --

<Foo foo={'bar'} />

code-block.jsx:1:10 lint/nursery/useConsistentCurlyBraces  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Should not have curly braces around expression.
  
  > 1 │ <Foo foo={‘bar’} />
      │          ^^^^^^^
    2 │ 
  
  ℹ JSX attribute value does not need to be wrapped in curly braces.
  
  ℹ Unsafe fix: Remove curly braces around the expression.
  
    1 │ <Foo·foo={‘bar’}·/>
      │          -     -

<Foo foo=<Bar /> />

code-block.jsx:1:10 lint/nursery/useConsistentCurlyBraces  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Should have curly braces around expression.
  
  > 1 │ <Foo foo=<Bar /> />
      │          ^^^^^^^
    2 │ 
  
  ℹ JSX attribute value should be wrapped in curly braces. This will make the JSX attribute value more readable.
  
  ℹ Unsafe fix: Add curly braces around the expression.
  
    1 │ <Foo·foo={<Bar·/>}·/>
      │          +       +

Valid

<>
    <Foo>Hello world</Foo>
    <Foo foo="bar" />
    <Foo foo={5} />
    <Foo foo={<Bar />} />
</>