如果 jsx 是多行的，则强制 jsx 从新行开始答案

【问题标题】：Enforce jsx to start on new line if jsx is multiline如果 jsx 是多行的，则强制 jsx 从新行开始
【发布时间】：2019-11-04 10:40:29
【问题描述】：

当 jsx 跨越多行时，哪个 eslint 规则更喜欢前者而不是后者？目前 prettier 正在将首选更改为 notPreferred

const preferred = (
    <tag
        prop={hi}
        another={test}
    \>
);

const notPreferred = (<tag
        prop={hi}
        Another={test}
    \>
);

【问题讨论】：

您是否安装了多个代码格式化程序？可能是另一个优先
不，无论如何我手动选择了更漂亮的格式，但它仍然会在“压扁”的地方进行格式化
你能发布你当前的 eslint 和更漂亮的配置吗？
在默认情况下使用空的 eslint 并且更漂亮，它仍然没有首选格式，我想要“如果有多个道具 multilien jsx 并在打开父母之后直线启动 jsx”

标签： javascript reactjs jsx eslint eslintrc

【解决方案1】：

我一直在寻找相同的东西，似乎 react/jsx-wrap-multilines 规则涵盖了这一点。

这意味着添加：

"react/jsx-wrap-multilines": ["error", {
   "declaration": "parens-new-line",
    "assignment": "parens-new-line",
    "return": "parens-new-line",
    "arrow": "parens-new-line",
    "condition": "parens-new-line",
    "logical": "parens-new-line",
    "prop": "parens-new-line"
  }
]

这可以完成工作，您可以通过多种方式对其进行自定义，请查看文档?

【讨论】：

【解决方案2】：

对我来说，将其添加到更漂亮的配置或 .prettierrc 解决了问题

"printWidth": 50

默认值在 80 左右

数值越低，多行数越多

祝你编码好运:)

【讨论】：