useFragmentSyntax

このコンテンツはまだ日本語訳がありません。

Diagnostic Category: lint/style/useFragmentSyntax

JSX and TSX

Since: v1.0.0

Sources:

Same as: react/jsx-fragments

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

<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

{
  "linter": {
    "rules": {
      "style": {
        "useFragmentSyntax": "error"
      }
    }
  }
}