Prettier/Eslint 在括号后维护换行符答案

【问题标题】：Prettier/Eslint maintain newline after bracketPrettier/Eslint 在括号后维护换行符
【发布时间】：2018-10-29 04:30:00
【问题描述】：

我最近研究过使用Prettier 来帮助保持一致的代码结构。我找到了Prettier VSCode plugin，发现它还可以选择使用Prettier-eslint。在大多数情况下，它很棒，但是 Prettier 做的一件事真的让我抓狂。

假设我在 React 组件的 render 函数中有这个：

return (
    <button
        onClick={
            (e) => {console.log('Hello, world!');}
        }
    >
        Click Me
    </button>
);

这正是我希望代码被格式化的方式，但 Prettier 不断把它变成这样：

return (
    <button
        onClick={(e) => {
            console.log('Hello, world!');
        }}
    >
        Click Me
    </button>
);

因此，它删除了左括号之后和右括号之前的换行符。

是否有关闭此功能的选项，或者我可以使用某种插件（对于 Prettier 和/或 Eslint）？我四处搜寻，但找不到完全涵盖此内容的任何内容。

谢谢！

【问题讨论】：

这可能是因为 prettier 更喜欢箭头函数体是多行块。不带括号的(e) => console.log('Hello, world!'); 是否也会发生这种情况？
不，而是把它变成这样：return <button onClick={(e) => console.log('Hello, world!')}>Click Me</button>;

【解决方案1】：

您可能不会喜欢这个问题的答案。这是 Prettier 旨在阻止的事情类型，自定义代码样式。它不是故意定制的。

“到目前为止，采用 Prettier 的最大原因是停止所有关于样式的持续争论。”

Prettier 似乎是现在的行业标准，带来 JS 开发

【讨论】：