New rule suggestion: prefer-fragment

Any time bare <div>s with no attributes are used, a fragment <>...</> should be used instead.

[jkillian]

Hmm, I’m a little concerned with this rule, I’m not sure it will be generally applicable. Having a bare div is semantically quite different than a fragment, for example a <div>:

• creates an HTML element with display: block whereas a fragment does not
• is stylable via CSS and may have CSS rules targeting it

I’m also curious which of the following elements the rule would affect in the hypothetical situation below:

public render() {
  return <header>
    <div>Option 1</div>
    <div><p>Option 2</p></div>
    <div />
  </header>;
}

[aoberoi]

I had a related idea: what if there was an option for jsx-wrap-multiline that enforced the preference of wrapping with a fragment, rather than parenthesis.

I currently have code like this:

const Foo = () => <>
  <h2>I'm a Foo</h2>
  <p>More content here</o>
</>;

I’m getting errors for the jsx-wrap-multiline rule, but I think in this case the fragment serves the purpose of the parenthesis. When there’s only one element parent in the multiline jsx, I would still want the error.

I know this isn’t exactly the rule being described here, but I think this is useful in determining what exactly the rules are trying to enforce.