Thursday 2 September 2021

How to configure prettier in a browser to ident html

I want to format html just by indention. So I've found out that I can do that using prettier. Here is my current options:

import prettier from 'prettier/standalone';
import htmlParser from 'prettier/parser-html';

    return prettier.format(source, {
                    parser: 'html',
                    plugins: [htmlParser],
                    tabWidth: 2,
                    htmlWhitespaceSensitivity: "strict",
                    bracketSpacing: false,
                });

What I see is that most of the tags are broken and some didn't start from the new line:

<li><p style="margin:0" 
              >123321<a
                href="https://123"
                >123</a
              > 
              (<a href="https://abc">abc</a
              >)</p
            ></li 
          > 
          <li
            ><p style="margin:0"
              ><a
                href="https://xyz"
                >xyz</a
              ></p
            ></li
          >

What I want is

<li>
    <p style="margin:0">123321
        <a href="https://123">123</a>
    </p>
</li>
<li>
    <p style="margin:0">
        <a href="https://xyz">xyz</a>
    </p>
</li>

Any ideas what prettier options would help to achieve that?



from How to configure prettier in a browser to ident html

No comments:

Post a Comment