Parenthesize multi-line jsx

[aaronjensen]

Is it already possible or would this plugin be the right place to automatically parenthesize multi-line jsx?

In other words:

return <div>
  Hello World
</div>;

should become:

return (
  <div>
    Hello World
  </div>
);

[royriojas]

it would be possible to be added as an option. And yes it can be done in this plugin

[royriojas]

that said, pull requests welcome!

[roman01la]

Hello! I've managed to wrap multi-line JSX into parens. But the problem is the closing parenthesis, there's no any ident or whitespace token before it which I could remove. How can I do this?

return (
  <div>
    Hello World
  </div>
  );

[nerfologist]

+1 for this

[afc163]

+1

[chenglou]

@roman01la do you still have the source for this?

[roman01la]

@chenglou I think it's here https://github.com/roman01la/html-to-react-components/blob/master/lib/format.js#L226 I'm using it in a tool to convert HTML to React components. You can find how to run it in readme.

[royriojas]

Very nice @roman01la. I will try to see if I find time to add this to esformatter-jsx directly.

[roman01la]

@royriojas Hey! Any updates on this issue? :)

[royriojas]

So sorry @roman01la I haven't had the time yet. Will try to see if I can get something done over the weekend. On the other hand, since you do have an idea of how to fix this, please don't hesitate to make a PR. Will be more than thankful for your help.

[royriojas]

Also, just in case you're also using eslint, the eslint-plugin-react has this rule https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md that might help with this issue.

[DaleLJefferson]

I'm now using eslint & eslint-plugin-react with auto-fix for all my formatting needs.

[aaronjensen]

@DaleJefferson it seems like the auto fix simply wraps it in parens, so it ends up looking like this:

  render() {
    return (<div className={css(styles.avatar)}>
      {initials(this.props.user)}
    </div>)
  }

is that what you're seeing too?

[DaleLJefferson]

@aaronjensen Yes it's not perfect but I find ESLint --fix does 90% of the formatting, having a separate formatter seems redundant, I don't think there is an ESLint rule for new line after parens but i'm sure it would be fairly simple to write.

[royriojas]

@DaleJefferson me too, I tend to agree with that. I can see how eslint can be converted to a formatter as well in the future at least.

[swinston1000]

@DaleJefferson - sorry if this is off topic... Do you know if it is possible to use auto-fix for ESLint to auto format in Sublime 3 ?

[royriojas]

@swinston1000 I execute eslint --fix from the command line, not from Sublime. But probably there is an option for that.

[swinston1000]

@royriojas - many thanks! I found it - https://github.com/TheSavior/ESLint-Formatter :-)