src/content/docs/linter/rules/use-consistent-curly-braces.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.8.2` - Diagnostic Category: [`lint/style/useConsistentCurlyBraces`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Inspired from [`react/jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md){
"linter": {
"rules": {
"style": {
"useConsistentCurlyBraces": "error"
}
}
}
}
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.
<Foo>{'Hello world'}</Foo>
<Foo foo={'bar'} />
<Foo foo=<Bar /> />
<>
<Foo>Hello world</Foo>
<Foo foo="bar" />
<Foo foo={5} />
<Foo foo={<Bar />} />
</>