src/content/docs/linter/rules/no-useless-fragments.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/complexity/noUselessFragments`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`react/jsx-no-useless-fragment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md) - Same as [`react-x/no-useless-fragment`](https://eslint-react.xyz/docs/rules/no-useless-fragment) - Same as [`@eslint-react/no-useless-fragment`](https://eslint-react.xyz/docs/rules/no-useless-fragment){
"linter": {
"rules": {
"complexity": {
"noUselessFragments": "error"
}
}
}
}
Disallow unnecessary fragments
<>
<>foo</>
<SomeComponent />
</>
<></>
<>
foo
</>
<React.Fragment>
foo
</React.Fragment>
<>
<Foo />
<Bar />
</>
<>foo {bar}</>