indentation/alignment in jsx (react/jsx-curly-newline)

Author: havenchykCreated Dec 1, 2019Updated Sep 1, 2026

Labelsbughelp wantedblocked

What version of this package are you using?

What operating system, Node.js, and npm version? MacOS Catalina, node 13.2.0, npm 6.13.1 What happened? Weird formatting, in prettier-standard package it's done more "correctly" What did you expect to happen? Another formatting like it's done in prettier-standard Are you willing to submit a pull request to fix this bug? Nope :(

I came across some conflict between prettier-standard and eslint with standard and standard-jsx presets included.

Example:

const A: React.FC = ({ children }) => <div>{children}</div>
const B: React.FC<{ onDelete: () => void }> = ({ children }) => (
  <div>{children}</div>
)

const MyComponent: FunctionComponent = () => {
  const someLongMethodHandlerName = (obj: {
    parameter1: string
    parameter2: string
  }) => {}

  return (
    <A>
      <B
        onDelete={() =>
          someLongMethodHandlerName({
            parameter1: 'parameter1',
            parameter2: 'parameter2'
          })
        }
      >
        B
      </B>
    </A>
  )
}

^^ this is how prettier-standard formats the code,

but eslint with standard and standard-jsx presets expects the next version

diff

const A: React.FC = ({ children }) => <div>{children}</div>
const B: React.FC<{ onDelete: () => void }> = ({ children }) => (
  <div>{children}</div>
)

const MyComponent: FunctionComponent = () => {
  const someLongMethodHandlerName = (obj: {
    parameter1: string
    parameter2: string
  }) => {}

  return (
    <A>
      <B
        onDelete={() =>
          someLongMethodHandlerName({
            parameter1: 'parameter1',
            parameter2: 'parameter2'
-         })
-       }
+ .       })}
      >
        B
      </B>
    </A>
  )
}

To me first variant is more correct /cc @sheerun

Source: standard/standard

View original on GitHub View discussion on GitHub