[react/jsx-fragments] Enforce <Fragment>

[thany]

I would like to enforce using <Fragment>...</Fragment> instead of <React.Fragment>...</React.Fragment>. The fix option would mean to also add it to the imports if it hasn't been already.

So these would be a warning:

import React from 'react';

export default Component = () => (
    <>Foo</>
);

import React from 'react';

export default Component = () => (
    <React.Fragment>Foo</React.Fragment>
);

This would be the fix: (and should be fixable with --fix)

import React, { Fragment } from 'react';

export default Component = () => (
    <Fragment>Foo</Fragment>
);

Is this achievable?

[ljharb]

That would be the same kind of rule as Component vs React.Component, and also for everything else chained off of React including hooks. I think there’d need to be a new rule for this, that had an option for each property independently.

[thany]

Yes, I agree a more generic rule for this would be preferable. I do think some magic has to happen to make that new rule's fixes process after this one's. Because this rule processes <> into <React.Fragment> and that new rule would then further process it into <Fragment> and an added import.

[ljharb]

That's not a problem; eslint often requires multiple passes (editor integrations often don't do this, but the command line does).

[dbrxnds]

Did anyone ever start on this? Or is there a way to currently achieve this behavior?

[ljharb]

Nope, the issue is open and it has a help wanted label, so it’s just waiting for a PR.