Standard(ESLint?) cannot decide on how many spaces are needed for a JSX Component

[akatechis]

What version of standard? 11.0.1

What operating system, Node.js, and npm version?
Windows 10, Node 10.0.0, NPM 6.1.0

What did you expect to happen?
I expect indentation to be 6 spaces for the line with the href prop.

What actually happened?
Standard (or ESLint?) cannot decide whether the indentation should be 6 or 8 spaces for the following example:

export default function MyComponent () {
  return (
    <div>
      <a onClick={(event) => {
        event.preventDefault()
      }}
        href=''>Send again</a>.
    </div>
  )
}

Initially, it correctly tells me it expects 6 spaces for the href line. I change it to 6, and it marks the same line, saying it expects 8.

[akatechis]

Looks like changing the onClick handler to be a single expression function body without curly braces fixes the issue:

export default function MyComponent () {
  return (
    <div>
      <a onClick={(event) => event.preventDefault()}
        href=''>Send again</a>.
    </div>
  )
}

[LinusU]

Have you tried it with Standard v12?

[akatechis]

Issue still exists in 12.0.1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[akatechis]

This issue has not been fixed, since reported.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[feross]

@akatechis I think that ESLint is behaving correctly in your code sample. The onClick attribute appears at an indentation of 6, so it expects all attributes to appear with the same indentation level. Here's what I would write:

export default function MyComponent () {
  return (
    <div>
      <a
        onClick={(event) => {
          event.preventDefault()
        }}
        href=''
      >
        Send again
      </a>.
    </div>
  )
}

Or better:

export default function MyComponent () {
  return (
    <div>
      <a
        onClick={event => event.preventDefault()}
        href=''
      >
        Send again
      </a>.
    </div>
  )
}