如何配置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周圍的正斜杠正在美化將其作為正則表達式讀取。

在包裝示例中，我認為存在問題，因為我在單詞中有撇號。 我把它拿出來，美化了之后做了一些移動的東西。 你有沒有試過repl.it？ 它是免費的，有一個更漂亮的按鈕，我發現它的效果非常好。