prettier 弄乱了 jsx 片段

Question

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

按 ctrl+保存此更改到

function App() {

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

当我将鼠标悬停在片段上时，它说“JSX 片段没有相应的结束标记。”

我尝试再次安装 prettier，没有帮助

Answer 1

您必须安装 Prettier plugin 并禁用 beautify 插件或您在 VS 代码中预装的任何其他代码格式化程序。

这可能会帮助您解决当前的问题。发生这种情况是因为两个插件的工作方式不同，并且保持启用状态会在保存时反映我们使用这种甲酸盐。禁用美化并安装 Prettier 插件有助于我们实现所需的输出。

您可以找到 Prettier 插件 (here)。

Answer 2

解决方案

我卸载了其他格式化程序“美化”。我反复按“shift+alt+f”格式化文档，这在右下角弹出 “有多个格式化程序。Select 要继续的默认格式化程序”。然后我选择了更漂亮的代码格式化程序

Answer 3

短语法

您可以使用一种新的更短的语法来声明片段。它看起来像空标签：

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

prettier messes up jsx fragments