Issue with eslint and JSX

[keul]

On a react.js project with eslint atom plugin configured, if I use the prettier format I get this code:

return [
  (
    <div>
      <input
        type="checkbox"
        name="invalidateCache"
        id={uniqueId}
        onChange={this.onInvalidateCache}
        checked={this.props.workflowDataStorage.cacheInvalidation}
      />
      <label htmlFor={uniqueId}>Invalidate cache on requests</label>
    </div>
  )
];

... but eslint raise a warning:

So it seems that eslint is happy with a code like this:

return [
  (
  <div>
    <input
      type="checkbox"
      name="invalidateCache"
      id={uniqueId}
      onChange={this.onInvalidateCache}
      checked={this.props.workflowDataStorage.cacheInvalidation}
    />
    <label htmlFor={uniqueId}>Invalidate cache on requests</label>
  </div>
)
];

Although the code formatted by prettier-atom is nicer IMHO, I'm wondering how to make eslint and this coexists. Maybe is a bug in eslint/jsx but I've no element to know.

Any hint?

[robwise]

@keul I am currently working on integrating prettier-eslint into this repo. Until that's ready, I would check out https://github.com/kentcdodds/prettier-eslint-atom