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