自动格式化模板中的html

Question

有没有办法自动格式化/制作包含在反引号（`）中的html代码？

假设我使用的是HTML模板：

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

为了简单起见，我有一个不同的文件，其中包含我的模板html：

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

如果我不手动标记每一行值得一个甜蜜的甜蜜标签（或4个空间为你的异教徒），html会是什么样子。 但是，我喜欢自动格式化的代码，比如说：

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

WebStorm是否向我提供了这样的功能？

autoformat快捷键 Ctrl + Alt + L 似乎无法解决问题。

另外，当我们谈论模板时，有没有办法去除模板化代码（Darkula主题）周围出现的可怕的绿色背景？

Answer 1

绿色来自设置＆gt;编辑＆gt;颜色和字体＆gt;一般然后在右侧标签代码＆gt;注入语言片段

要自动格式化此类片段，您必须单独编辑它。将光标放在模板内的任何位置，按 ALT + ENTER ，然后选择编辑HTML片段。在新标签中，您可以使用 CTRL + ALT + L 。