Ignore JSX?

Has anybody requested an option to ignore JSX when formatting? Is that a possibility?

I love the JS formatting. Generally the prettier-formatted JS ends up looking great. I find that when it comes to JSX, though, I’m willing to make more compromises when it comes to long line length and stuff.

Currently, the one thing that prettier does that I don’t think I’ll ever get used to is it puts closing > on their own line if the JSX line exceeds max length.

export default function FooterNavbar() {
  return (
    <nav
      className="navbar navbar-light navbar-toggleable-md justify-content-center"
    >
      <div className="navbar-nav">
        <NavLink to="/article">
          News
        </NavLink>
      </div>
    </nav>
  );
}

This happens a lot if you have real long props, such as className, etc. I find that this formatting ends up making things less understandable at a glance due to the hanging > all over the place. I realize that in this situation there’s not really a great solution, because either you go with > on their own line, which I think looks bad, or you put the > at the end of the JSX line, which can make it visually blend with the child elements. No real great solution, imo, but I tend to prefer the latter just to avoid > on their own lines.

export default function FooterNavbar() {
  return (
    <nav
      className="navbar navbar-light navbar-toggleable-md justify-content-center">
      <div className="navbar-nav">
        <NavLink to="/article">
          News
        </NavLink>
      </div>
    </nav>
  );
}

This is a situation where I tend to just let really long JSX lines exceed the max width for sake of readability.

export default function FooterNavbar() {
  return (
    <nav className="navbar navbar-light navbar-toggleable-md justify-content-center">
      <div className="navbar-nav">
        <NavLink to="/article">
          News
        </NavLink>
      </div>
    </nav>
  );
}

[jlongster]

From my view, we are open to the idea of adding a few more configuration options, with that being one of them. However, in my opinion we should give that decision a long time to be made. If people still want that after using prettier for several weeks, we can talk. If we implemented a config option for every tweak that looked weird to someone new, we’d have a ton of them, but I’m betting that once you use it for a while that will become the new norm.

Our brain tends to adapt to whatever we’re using the most. That doesn’t mean there aren’t a few things we should give on, though, like bracket spacing and the few other config we have.

[vjeux]

Currently, the one thing that prettier does that I don’t think I’ll ever get used to is it puts closing > on their own line if the JSX line exceeds max length.

Facebook coding style is also to put it the way you currently do it. Right now prettier follows the airbnb style guide and there isn’t any option to configure that. More examples like this are great to make a case for evaluating more options.

This is a situation where I tend to just let really long JSX lines exceed the max width for sake of readability.

There is another issue where a similar this is requested for long descriptions of tests. I could see not splitting in multiple lines when:

• There is only one prop
• The value of the prop is a string

as it’s not likely going to make the output look worse and not make a huge difference trying to be < 80 columns.