如何配置jsbeautifier设置以实际美化我的HTML/Javascript代码

Question

我已经看到了几个关于如何格式化HTML和javascript代码的问题.一个常见的答案似乎是jsbeautify(以及jsbeautify.js的GitHub页面)是一个很好的解决方案.

但是,我似乎无法正确格式化我的任何代码,我想知道是否有一些需要更改的默认参数,或者我只是误解了美化应该做什么.我期待的是每个嵌套标签都将在新线上缩进到适当的级别.但相反,我所看到的(这似乎不是jsbeautifier独有的)是有时几个标签在同一行上串起来,并且忽略断行的指令.

例1:

我直接从这个问题中得到了这个例子.

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>

当我去jsbeautifer.org并输入上面的代码并点击"Beautify Javascript或HTML"时,它什么也没做!我希望输出看起来像这样:

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>

这是另一个例子.我选择了"80个字符附近的换行".

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
</script></div></span>

输出结果如下.请注意,没有包装.

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
<
/script></div > < /span>

为什么不<span>,<div>而且最好<input>是分开的？为什么开放<在一个单独的线上？我期待这样的事情:

<!--Meta 6,1-->
<span>
    <div>
        Just some sample text here which is fairly long, maybe about 100 
        characters or so, I'm not really counting.
        <input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/>
        <script type="text/javascript">;
        </script>
    </div > 
</span>

我需要传递一些参数来使其工作吗？我已经查看了这个文档,但是我的空白了.

Answer 1

您列出的第一个示例

<div id="hlogo"> <a href="/">Stack Overflow</a>ABC</div>

无法正常工作，因为 ABC 周围的正斜杠导致美化将其读取为正则表达式。

在换行示例中，我认为存在问题，因为“I'm”一词中有一个撇号。我把它拿出来，美化之后做了一些移动。你尝试过repl.it吗？它是免费的，并且有一个更漂亮的按钮，我发现它效果非常好。