javascript - 如何在浏览器中配置 prettier 以缩进 html

Question

我想仅通过缩进来格式化 html。所以我发现我可以做到这一点 using prettier .这是我目前的选择:

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,
                });

我看到的是大多数标签都坏了，有些不是从新行开始的:

<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
          >

我想要的是

<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>

有什么想法可以帮助实现这一目标？

Answer 1

您可以在选项中将 htmlWhitespaceSensitivity 设置为“忽略”。见 https://prettier.io/docs/en/options.html#html-whitespace-sensitivity .

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

输出看起来不像你想要的那样，但更接近。

<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>