如何让组件的 props 更漂亮地保持在一行上？

我使用 VSCode 插件 Prettier 作为我的 jsx 代码的格式化程序。当它运行时，它让每个 props 自己占一行

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

如何让它们保持在这样的一行上：

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

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

说到这里，请问你为什么要在一行中保留长的道具名称？如果您不关心行长限制，很可能 Prettier 不是适合您的工具。它的目的是通过处理代码风格来促进项目和团队之间的协作，而不是成为一个可以随心所欲的可定制代码格式化程序。

通过在代码的某些部分之前插入注释 // prettier-ignore，可以告诉 Prettier 忽略该部分代码。但是，如果在这种情况下使用，它会忽略整个函数，这不是我们想要的。

所以也许这样的事情是可以接受的：

const compA = (
  // prettier-ignore
  { prop1,prop2,prop3,prop4 }
) => {
    return ();
}