Is there a Prettier setting that prevents the automatic wrapping of React components in brackets when using the &&, || or ternary operator?

Viewed 3074

When I save my component file, prettier automatically formats the return statement to this:

return edit ? (
  <DetailsEdit study={study} setEdit={setEdit} />
) : (
  <DetailsView study={study} setEdit={setEdit} />
);

Is there any way I can make it such that it formats it to this instead?

return edit 
    ? <DetailsEdit study={study} setEdit={setEdit} />
    : <DetailsView study={study} setEdit={setEdit} />;

These are the contents of my .prettierrc file

{
  "tabWidth": 2,
  "printWidth": 100
}
2 Answers

No, there isn't. Prettier's philosophy is to not have very many options, and the ones it does have are documented here.

IMO, the parenthesization is easier to read anyway, especially once the component in the ternary inevitably gets longer.

Since it supports es5 due to its prettier structure, there is not much to do about it.

Using Trailing Commas

Related