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

Posted 2023-02-22

【中文标题】Prettier/Eslint 在括号后维护换行符

【英文标题】：Prettier/Eslint maintain newline after bracket

【发布时间】：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 的最大原因是停止所有关于样式的持续争论。”

https://prettier.io/docs/en/option-philosophy.html

以下是所有可用选项的列表：https://prettier.io/docs/en/options.html

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