WebStorm：如何在TypeScript/ES6中对齐html模板

我想在背景标记之间对齐/格式化html代码。 WebStorm中是否有实现此目的的设置

@Component(
    {
        selector: 'my-app',
        template: `<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<h2>{{hero.name}} details!</h2>
<div>
  <label>id: </label>{{hero.id}}
</div>
<div>
  <input [(ngModel)]='hero.name' placeholder='name'/>
</div>`
    }
)

@组件(
{
选择器：“我的应用程序”，
模板：`{title}}
我的英雄


{{hero.id}{{hero.name}


{{hero.name}}详细信息！
id:{{hero.id}
`
}
)

---

将鼠标悬停在模板html上时，会出现一个灯泡，建议您编辑模板。如果你点击，模板会在单独的窗口中打开进行编辑。是的，我知道，但我希望至少能够在.ts文件中对齐html，这样它就可以阅读，而不必进入“编辑模板模式”。格式化可以在普通引号之间使用html，但不能使用（es6）反勾引号。我认为这是一个可以跟踪的问题：