Prettier/Eslint 括号后保持换行

Question

我最近研究过使用 Prettier to help maintain a consistent code structure. I found the Prettier VSCode plugin and saw that it also had an option to use 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 and/or Eslint）？我四处搜索，但找不到任何完全涵盖此内容的内容。

谢谢！

Answer 1

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

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

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

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

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

Prettier/Eslint 括号后保持换行

Prettier/Eslint maintain newline after bracket

javascript

reactjs

eslint

prettier