esformatter-jsx
esformatter-jsx copied to clipboard
royriojas
Parenthesize multi-line jsx
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>
);
it would be possible to be added as an option. And yes it can be done in this plugin
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>
);
@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.
Very nice @roman01la. I will try to see if I find time to add this to esformatter-jsx directly.
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.
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.
I'm now using eslint & eslint-plugin-react with auto-fix for all my formatting needs.
@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?
@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.
@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.
@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 ?
@swinston1000 I execute eslint --fix from the command line, not from Sublime. But probably there is an option for that.
@royriojas - many thanks! I found it - https://github.com/TheSavior/ESLint-Formatter :-)