Search code examples
javascriptreactjsjsxprettierprettier-eslint

prettier messes up jsx fragments

function App() {
    
      return (
       <>
        <
        Navbar / >
        <
        Users / >
       </>
      );
    }

on hitting ctrl+Save this changes to

function App() {

  return ( <
    >
    <
    Navbar / >
    <
    Users / >
    <
    />
  );
}

when i hover over the fragment it says "JSX fragment has no corresponding closing tag."

i tried installing prettier again ,didn't help

Solution

  • You have to install the Prettier plugin and disable beautify plugin or any other code formatter you have pre-installed in the VS code.

    This may help you resolve your current issue. This happens due to the fact that both plugins work differently and keeping both enabled refects us with this formate on save. Disabling beautify and installing the Prettier plugin helps us in achieving the required output.

    You can find the Prettier plugin (here).