时间戳

首页 > 解决方案 > 如何让组件的道具更漂亮地保持在一行？

reactjs - 如何让组件的道具更漂亮地保持在一行？

问题描述

我正在使用 VSCode 插件 Prettier 作为我的 jsx 代码的格式化程序。当它运行时，它使每个道具都自己走一条线

const Component = ({
    prop1,
    prop2,
    prop3,
    prop4,
  }) => {
    return ();
}

我如何使它保持在一行这样：

const compA = ({ prop1, prop2, prop3, prop4 }) => {
    return ();
}

标签： reactjsvisual-studio-codevscode-settingsprettierformatter

解决方案

Prettier 的算法基于重新打印您的代码并考虑行长度限制（默认为 80 个字符）。当带有道具的行低于此限制时，它不会被拆分。但是当道具名称足够长时，Prettier 会将它们放在单独的行中。您可以在此演示中自己看到这一点。

说了这么多，请问为什么要在一行中保留长的道具名称？如果您不关心行长限制，那么 Prettier 很可能不是适合您的工具。它的目的是通过照顾代码样式来促进项目和团队中的协作，而不是成为一个可定制的代码格式化程序，可以做任何用户想要的事情。

推荐阅读