在模板中自動格式化html

Question

是否有任何方法來自動格式化/選項卡包含反引號（`）的HTML代碼？

假設我使用HTML模板：

@Component({ 
    selector: "xyz", 
    template: htmlTemplate 
}) 

而且爲了簡單起見，我必須保持我的模板HTML不同的文件：

export const htmlTemplate = ` 
<div> 
<div> 
<div></div> 
<div></div> 
</div> 
<div> 
</div> 
</div> 
` 

那是什麼產生的HTML代碼看起來像我不手動標籤每一行，值得一個甜蜜的甜蜜標籤（或4個空間爲異教徒）。 不過，我想代碼自動格式，比方說，像這樣的：

export const htmlTemplate = ` 
<div> 
    <div> 
     <div></div> 
     <div></div> 
    </div> 
    <div> 
    </div> 
</div> 
` 

是否WebStorm給我任何像這樣的功能？自動格式快捷鍵Ctrl + Alt + L似乎沒有辦法。

另外，當我們談論模板時，有什麼方法可以去除出現在模板化代碼（Darkula主題）周圍的可怕的綠色背景嗎？

Answer 1

綠色的顏色從設置>編輯器來>顏色&字體>一般然後在右邊的選項卡代碼>注入的語言片段

要自動格式這種片段，你必須編輯它分開。將光標放在模板內的任意位置，按ALT + ENTER然後選擇編輯HTML片段。在新選項卡中，您可以使用CTRL + ALT + L。