useFragmentSyntax (since v0.10.0)
This rule enforces the use of <>...</>
over <Fragment>...</Fragment>
.
The shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
Examples
Invalid
<Fragment>child</Fragment>
style/useFragmentSyntax.js:1:1 lint/style/useFragmentSyntax FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use shorthand syntax for Fragment elements instead of standard syntax.
> 1 │ <Fragment>child</Fragment>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
ℹ Suggested fix: Replace <Fragment> with the fragment syntax
1 │ <Fragment>child</Fragment>
│ -------- --------
<React.Fragment>child</React.Fragment>
style/useFragmentSyntax.js:1:1 lint/style/useFragmentSyntax FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Use shorthand syntax for Fragment elements instead of standard syntax.
> 1 │ <React.Fragment>child</React.Fragment>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
ℹ Suggested fix: Replace <Fragment> with the fragment syntax
1 │ <React.Fragment>child</React.Fragment>
│ -------------- --------------