Prettier Messes Up Jsx Fragments

function App() { return ( <>< Navbar / >< Users / > ); } on hitting ctrl+Save this

Solution 1:

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

Solution 2:

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

Solution 3:

Short Syntax

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

classColumnsextendsReact.Component {
  render() {
    return (
      <><td>Hello</td><td>World</td></>
    );
  }
}

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