JSX - Ternary condition which renders a single JSXElement enforces useless braces

Prettier 1.10.2 Playground link

--print-width 100
--trailing-comma all

Input:

const cellComponent = props => props.column.name === 'actions' 
  ? <Table.Cell {...props} value={<Actions {...props} />} />
  : <Table.Cell {...props} />

Output:

const cellComponent = props =>
  props.column.name === "actions" ? (
    <Table.Cell {...props} value={<Actions {...props} />} />
  ) : (
    <Table.Cell {...props} />
  );

Expected behavior:

const cellComponent = props => props.column.name === 'actions' 
  ? <Table.Cell {...props} value={<Actions {...props} />} />
  : <Table.Cell {...props} />

[suchipi]

I don’t think there’s an eslint rule that will undo the formatting in the way you want.

[j-f1]

There’s prettier-eslint, a tool that runs your code through an ESLint config of your choice after running Prettier, enabling you to choose and enforce your own style guide while still taking advantage of Prettier’s features.