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

Posted 2023-02-22

【中文标题】如何在浏览器中配置 prettier 以缩进 html

【英文标题】：How to configure prettier in a browser to ident html

【发布时间】：2021-10-28 07:46:05

【问题描述】：

我想通过缩进来格式化 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>

您知道哪些更漂亮的选项将有助于实现这一目标吗？

【问题讨论】：

我怀疑它的格式是这样的，因为间距在 html 中具有一定的含义。 Prettier 知道不要在可能有意义的地方添加间距。不过，不知道是否有关闭它的选项。你可能会通过询问他们的issue tracker得到答案。

你在输入什么更漂亮，一个字符串一个 html 块？我怀疑您的输入数据确实包含错误

【参考方案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>

【讨论】：

请添加您的输入，也许我可以在那里看到问题。