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 ponent:

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!

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 ponent:

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!

• javascript
• reactjs
• eslint
• prettier

• This might be because prettier prefers arrow function bodies to be multiline blocks. Does this also happen when doing (e) => console.log('Hello, world!'); without the body parentheses? – Bary12 Commented May 18, 2018 at 18:27
• No, instead it turns it into this: return <button onClick={(e) => console.log('Hello, world!')}>Click Me</button>; – FizzyGalacticus Commented May 18, 2018 at 18:36

1 Answer 1

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