美化/Prettier和Eslint在括号后保留换行

Question

6

我最近研究了使用 Prettier 来帮助维护一致的代码结构。我发现了 Prettier VSCode 插件，并且看到它还有一个使用 Prettier-eslint 的选项。总体来说，它很棒，但是有一件事情让我非常恼火。

假设我在 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）？我搜索了一下，但没有找到完全涵盖这个问题的内容。

谢谢！

- FizzyGalacticus

这可能是因为 prettier 更喜欢箭头函数体是多行块。如果不使用主体括号进行 (e) => console.log('Hello, world!');，这种情况也会发生吗？ - Bary12

不会，相反它会被转化为这个：return <button onClick={(e) => console.log('Hello, world!')}>Click Me</button>; - FizzyGalacticus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven Lacks · Accepted Answer

你可能不会喜欢这个问题的答案。这就是Prettier旨在阻止自定义代码风格的类型。它的目的是不太可定制的。

“采用Prettier的最大原因是停止所有关于样式的持续辩论。”

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