prettier messes up jsx fragments

Question

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

Maybe this article will help you to solve your problem: https://github.com/prettier/prettier-vscode/issues/449 — Shivanshu Gupta, Jun 30 '20 at 17:51
Did you try using prettier directly from the command line ? Same with eslint --fix ? This would check whether it's a vs code issue vs eslint / prettier — Axnyff, Jun 30 '20 at 17:53

score 2 · Accepted Answer · answered Jun 30 '20 at 18:20

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).

score 1 · Answer 2 · answered Jun 30 '20 at 18:24

Solution

i uninstalled other formatter " beautify". i was hitting "shift+alt+f" for formating the document repeatedly and this popped up on the bottom right "there are mutliple formatters . Select a default formatter to continue". then i chose prettier -code formatter

refer to the article https://github.com/prettier/prettier-vscode/issues/449 mentioned by @Shivanshu Gupta in the comments above

score -1 · Answer 3 · answered Feb 12 '21 at 00:49

Short Syntax

There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

Link: https://reactjs.org/docs/fragments.html#short-syntax

prettier messes up jsx fragments

3 Answers3

Linked