useFragmentSyntax
Summary
Section titled Summary- Rule available since:
v1.0.0
- Diagnostic Category:
lint/style/useFragmentSyntax
- This rule has an unsafe fix.
- The default severity of this rule is information.
- Sources:
- Same as
react/jsx-fragments
- Same as
Description
Section titled DescriptionThis rule enforces the use of <>...</>
over <Fragment>...</Fragment>
.
The shorthand fragment syntax saves keystrokes and is only inapplicable when keys are required.
Examples
Section titled ExamplesInvalid
Section titled Invalid<Fragment>child</Fragment>
code-block.jsx: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.
ℹ Unsafe fix: Replace <Fragment> with the fragment syntax
1 │ <Fragment>child</Fragment>
│ -------- --------
<React.Fragment>child</React.Fragment>
code-block.jsx: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.
ℹ Unsafe fix: Replace <Fragment> with the fragment syntax
1 │ <React.Fragment>child</React.Fragment>
│ -------------- --------------
How to configure
Section titled How to configure{ "linter": { "rules": { "style": { "useFragmentSyntax": "error" } } }}