CODEWITHSUNDEEP
reactjsprettier
Yohan Jhaveri
Yohan Jhaveri

Reputation: 109

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

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
}

Upvotes: 5

Views: 7533

Answers (2)

Kayra Berk Tuncer
Kayra Berk Tuncer

Reputation: 395

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

Using Trailing Commas

Upvotes: 1

AKX
AKX

Reputation: 168967

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.

Upvotes: 5

Related Questions