DocumentationRulesprefer-shorthand-fragment

prefer-shorthand-fragment

Full Name in eslint-plugin-react-x

react-x/prefer-shorthand-fragment

Full Name in @eslint-react/eslint-plugin

@eslint-react/prefer-shorthand-fragment

Features

🔍 🔧

What it does

Enforces the use of shorthand syntax for fragments.

A safe auto-fix is available for this rule.

Examples

Failing

import React, { Fragment } from "react";
 
function MyComponent() {
  return (
    <Fragment>
      <button />
      <button />
    </Fragment>
  );
}

Passing

import React from "react";
 
function MyComponent() {
  return (
    <>
      <button />
      <button />
    </>
  );
}

Implementation

prefer-shorthand-booleanuse-jsx-vars