useFragmentSyntax (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/style/useFragmentSyntax
This rule isn’t recommended, so you need to enable it.
This rule has an unsafe fix.
The default severity of this rule is information.
Sources:
- Same as react/jsx-fragments

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useFragmentSyntax": "error"
6
      }
7
    }
8
  }
9
}

Description

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

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

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