Question

当jsx跨越多行时，哪种eslint规则会更喜欢前者？目前，漂亮的对象已从“不喜欢的人”更改为“不喜欢的人”

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

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

Answer 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"
  }
]

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

Answer 2

对于我来说，将此添加到Prettier Config或.prettierrc解决了该问题

"printWidth": 50

默认值为80

您降低的值越多，得到的多行就越多

祝你好运：）

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

2 个答案: