Javascript 漂亮的会弄乱jsx片段 函数应用程序（）{ 返回( < 导航栏/> < 用户/> ); }

按ctrl键并将此更改保存到

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

函数应用程序（）{
报税表（<
>
<
导航栏/>
<
用户/>
<
/>
);
}

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

---

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

您必须安装

prettier插件

并禁用

美化

插件或您在VS代码中预先安装的任何其他代码格式化程序

这可能有助于您解决当前的问题。这是因为两个插件的工作方式不同，并且在保存时使用此格式保持两个已启用的引用。 禁用美化并安装更漂亮的插件有助于我们实现所需的输出

您可以找到更漂亮的插件（）。

解决方案

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

---

请参阅@Shivanshu Gupta在上述评论中提到的文章

简短语法

有一种新的、更短的语法可用于声明片段。它看起来像是空标签：

function App() {

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

类列扩展React.Component{
render（）{
返回(
你好
世界
);
}
}

---

链接：

也许本文将帮助您解决问题：您是否尝试直接从命令行使用prettier？与eslint相同--修复？这将检查是否是vs代码问题vs eslint/prettier@Axnyff我对这两个都使用了Vs代码扩展

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