如何让组件的 props 保持在一行上？

Question

我使用 VSCode 插件 Prettier 作为我的 jsx 代码的格式化程序。当它运行时，它使每个道具都独立成一行

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

如何让它们保持在一行上，如下所示：

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

Answer 1

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

说到这里，请问为什么要将长 prop 名称保留在一行上？如果您不关心线条长度限制，那么 Prettier 很可能不是适合您的工具。它的目的是通过照顾代码风格来促进项目和团队的协作，而不是成为一个可定制的代码格式化程序，可以执行用户想要的任何操作。

Answer 2

您可以添加名为

.prettierrc

的文件并输入此代码

{ "singleAttributePerLine": false }

文档：https://prettier.io/docs/en/configuration

Answer 3

通过在代码的某些部分之前插入注释

// prettier-ignore

，可以告诉 Prettier 忽略该部分代码。但是，如果在这种情况下使用，它会忽略整个函数，这不是我们想要的。

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

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