ref(lint): ban React.Fragment in favor of named Fragment import#115939
Conversation
Add no-restricted-syntax rules for both MemberExpression and JSXMemberExpression forms of React.Fragment, and fix all existing usage.
📊 Type Coverage Diff✅ No new type safety issues introduced. Coverage: 93.57% |
There was a problem hiding this comment.
💯 yessss I was hoping to eventually bring up standardizing!
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md might be a good place to look that already does this with auto-fixing? If it doesn't have exactly what we prefer, maybe a good OSS contribution?
Edit: I mean, I don't think that rule has this style, but maybe there's a contribution opportunity to add that there, or to a separate stylistic rule?
|
@JoshuaKGoldberg that's a good point, we already use it to enforce the longhand! There's a help wanted issue so that would likely be accepted. In the middle of a bunch of stuff, but if I get any time I'll try to circle back. |
) Adds `no-restricted-syntax` rules banning both `React.Fragment` and `<React.Fragment>` — enforces `import {Fragment} from 'react'` instead. Same pattern as the existing `React.forwardRef` ban. `Fragment` was already used in 936 files vs 23 files that used `React.Fragment`. These have been updated. Left snapshot strings and lint rule test fixtures alone. Unfortunately not autofixable via `no-restricted-syntax`, but agents should take care of these automatically most of the time.
Adds
no-restricted-syntaxrules banning bothReact.Fragmentand<React.Fragment>— enforcesimport {Fragment} from 'react'instead. Same pattern as the existingReact.forwardRefban.Fragmentwas already used in 936 files vs 23 files that usedReact.Fragment. These have been updated. Left snapshot strings and lint rule test fixtures alone.Unfortunately not autofixable via
no-restricted-syntax, but agents should take care of these automatically most of the time.