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?
You can set htmlWhitespaceSensitivity to "ignore" in your options. See https://prettier.io/docs/en/options.html#html-whitespace-sensitivity.
return prettier.format(source, {
parser: 'html',
plugins: [htmlParser],
tabWidth: 2,
htmlWhitespaceSensitivity: "ignore"
});
The output doesn't look exactly like you wanted it, but closer.
<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>