question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Messing up jsx formatting multi-line attribute

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
bitwisemancommented, May 1, 2016

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

0reactions
bitwisemancommented, Aug 9, 2016

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>;
Read more comments on GitHub >

github_iconTop Results From Across the Web

Option to retain multi-line props in JSX/HTML #3101 - GitHub
My desire with this issue is to either remove auto-formatting completely or add an option to enable / disable for JSX. Like object...
Read more >
How do you stop Prettier in VS code splitting attributes onto ...
A quick fix is to go to Prettier Extension Settings (ctrl + shift + X) and in Prettier Extension Settings search for "Print...
Read more >
Prettier specifically annoys me to no end with this problem. If ...
If youre adding more attributes to a jsx component later and know it you might format to multiline early. It decides to undo...
Read more >
Rationale - Prettier
Once an object literal becomes multiline, Prettier won't collapse it back. If in Prettier-formatted code, we add a property to an object literal,...
Read more >
Introducing JSX - React
Specifying Attributes with JSX​​ const element = <img src={user.avatarUrl}></img>; Don't put quotes around curly braces when embedding a JavaScript expression in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found