更漂亮的东西弄乱了 jsx 片段

Posted 2023-02-22

【中文标题】更漂亮的东西弄乱了 jsx 片段

【英文标题】：prettier messes up jsx fragments

【发布时间】：2020-10-21 02:27:54

【问题描述】：

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

点击 ctrl+保存此更改到

function App() 

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

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

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

【问题讨论】：

或许这篇文章能帮你解决问题：github.com/prettier/prettier-vscode/issues/449

你试过直接从命令行使用 prettier 吗？与 eslint --fix 一样吗？这将检查它是否是 vs 代码问题 vs eslint / prettier

@Axnyff 我对两者都使用了 Vs 代码扩展

【参考方案1】：

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

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

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

【参考方案2】：

解决方案

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

参考上面cmets中@Shivanshu Gupta提到的文章https://github.com/prettier/prettier-vscode/issues/449

【参考方案3】：

短句法

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

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

链接：https://reactjs.org/docs/fragments.html#short-syntax