Lint Rules

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>
   --------------        --------------