Js-beautify: Messing up jsx formatting multi-line attribute

Created on 8 Apr 2016  路  5Comments  路  Source: beautify-web/js-beautify

I've got latest version installed. My files are opened as Babel JS files and I have e4x set to true in my configuration file. This is what I have currently:

return (
  <a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
  </a>
);

However, after formatting it becomes this:

return ( < a href = "#"
  onClick = {
    e => {
      e.preventDefault()
      onClick()
    }
  } > { children } < /a>
);

What do I need to change to have my files formatted properly or at least not messed up?

bug

Most helpful comment

Thanks! I've added it to my list for the next version.

All 5 comments

Have you set e4x=true?

@bitwiseman Yes, I did.

Me too with e4x=true! It's really weird. :joy:

Thanks! I've added it to my list for the next version.

Here's what I have found out about this issue:

// successful - no change
return(
    <a href="#" onClick={e => {      e.preventDefault()      onClick()}}>
    {children}
  </a>
);


// successful - no change
return <b><a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
  </a></b>;

// failure - adds spaces 
return <a href="#"
    onClick={e => {
      e.preventDefault()
      onClick()
    }}>
    {children}
</b>;
Was this page helpful?
0 / 5 - 0 ratings