在模板中自动格式化 html

Question

有什么方法可以自动将 format/tab 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

绿色来自Settings > Editor > Color & Fonts > General然后在右侧选项卡Code > Injected language fragment

要自动格式化这种片段，您必须单独编辑它。将光标放在模板内的任意位置，按 ALT+ENTER 然后选择 Edit HTML fragment.在新选项卡中，您可以使用 CTRL+ALT+L.

Auto formatting html in a template