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

Source

buinauskas

Most helpful comment

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

bitwiseman on 1 May 2016

👍4

All 5 comments

Have you set e4x=true?

bitwiseman on 11 Apr 2016

@bitwiseman Yes, I did.

buinauskas on 11 Apr 2016

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

Firef0x on 1 May 2016

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

bitwiseman on 1 May 2016

👍4

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>;

bitwiseman on 9 Aug 2016

Was this page helpful?

0 / 5 - 0 ratings