Search code examples
javascriptreactjseslintprettier

Prettier/Eslint maintain newline after bracket

I've recently looked into using 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. For the most part, it's great, however there is one thing that Prettier does that really drives me nuts.

Let's say I have this in a render function on a React component:

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

This is exactly how I would like the code to be formatted, but Prettier keeps turning it into this:

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

So, it's removing the newlines after the opening bracket and before the closing bracket.

Is there an option to turn this off, or some kind of plugin that I can get to do so (for Prettier and/or Eslint)? I searched around but couldn't find anything that quite covered this.

Thanks!

Solution

  • You're probably not going to like the answer to this question. This is the type of thing Prettier is designed to stop, custom code style. It's not very customizable on purpose.

    "By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles."

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

    Here's a list of all the options available: https://prettier.io/docs/en/options.html

    Prettier seems to be the industry standard now, bringing JS development