Stop Prettier formatter from putting each HTML tag on its own line in React JSX files?

Question

When I format an HTML file using prettier, it looks like this:

<nav>
  <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About">About</a></li>
    <li><a href="#" title="Sign Up">Sign Up</a></li>
    <li><a href="#" title="Contact">Contact</a></li>
    <li><a href="#" title="Careers">Careers</a></li>
  </ul>
</nav>

But when I put the same tags in a JSX file, it reformats it like this:

import React from "react";

const Demo = () => {
  return (
    <nav>
      <ul>
        <li>
          <a title="Home">Home</a>
        </li>
        <li>
          <a title="About">About</a>
        </li>
        <li>
          <a title="Sign Up">Sign Up</a>
        </li>
        <li>
          <a title="Contact">Contact</a>
        </li>
        <li>
          <a title="Careers">Careers</a>
        </li>
      </ul>
    </nav>
  );
};

export default Demo;

How can I stop this behavior? It happens even with a high value for prettier.printWidth

score 4 · Accepted Answer · answered Dec 23 '21 at 19:19

4

After more reading I've concluded this isn't possible. HTML is whitespace sensitive so it is retained, but since JSX isn't it gets autoformatted always and Prettier has no option to keep tags on the same line.

answered Dec 23 '21 at 19:19

pyjamas

4,608
5
38
70

score -1 · Answer 2 · answered Dec 23 '21 at 19:13

-1

Prettier has the option printWidth. You can change it to something large value in settings.json. It's a bit of a stretch, but it works.

"prettier.printWidth": 140

answered Dec 23 '21 at 19:13

Patryk Sztuczka

1
3

score -2 · Answer 3 · answered Dec 17 '21 at 23:50

-2

You should be able to curve this by using

"bracketSameLine": true

In the prettier config JSX Brackets

This also could be of some help How to disable prettier settings creating new line of > of html tag?

answered Dec 17 '21 at 23:50

ConnerWithAnE

1,106
10
26

Just tried that but it doesn't fix it. It says `Put the > ... at the end of the last line instead of being alone on the next line` which doesn't apply here. All my tags have `<` and `>` on the same line, but I want multiple tags kept on the same line – pyjamas Dec 18 '21 at 00:00

Stop Prettier formatter from putting each HTML tag on its own line in React JSX files?

3 Answers3