Eu tenho o seguinte bloco no meuapp.component.ts Arquivo:

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

Como posso dizer ao WebStorm para refinar meu JS e o HTML que está dentro das aspas?

Eu já tentei:Code > Auto-indent Lines eCode > Reformat Code

estou usandoWebStorm 2016.3