18910140161

JavaScript-如何在浏览器中配置Prettier以识别HTML-堆栈溢出

顺晟科技

2022-10-18 12:37:57

114

我只想通过缩进来格式化HTML.所以我发现我可以用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=";边距:0";>;123321<;a href=";https://123">123<;/p>;<;/Li>;<;Li>;<;p style=";边距:0";>;<;a href=";https://xyz">xyz<;/p>;<;/Li>;

有没有什么更好的选择可以帮助实现这一目标?


顺晟科技:

您可以将HtmlWhitespaceSensitivity设置为“忽略”在你的选择中。请参见https://prettier.io/docs/en/options.html#html-whitespace-sensitivity.

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

输出看起来并不完全像你想要的,但更接近。

<代码><;Li>;<;p style=";边距:0";>;123321<;a href=";https://123">123(<;a href=";https://abc">abc)<;/p>;<;/Li>;<;Li>;<;p style=";边距:0";>;<;a href=";https://xyz">xyz

<;/Li>;
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航