useConsistentCurlyBraces
Ce contenu n’est pas encore disponible dans votre langue.
Diagnostic Category: lint/nursery/useConsistentCurlyBraces
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
Section titled ExamplesInvalid
Section titled Invalidcode-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>
│ -- --
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’}·/>
│ - -
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·/>}·/>
│ + +