CODEWITHSUNDEEP
javascriptreactjseslintprettier
FizzyGalacticus
FizzyGalacticus

Reputation: 427

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!

Upvotes: 6

Views: 9275

Answers (1)

Steven Lacks
Steven Lacks

Reputation: 904

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

Upvotes: 5

Related Questions