WebStorm：如何在引號一個JavaScript內美化HTML文件

Question

我在app.component.ts文件中的以下塊：

@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> 
    ` 
}) 

我怎麼能告訴WebStorm美化我的JS以及是裏面的HTML報價？

我已經嘗試：Code > Auto-indent Lines和Code > Reformat Code

我使用WebStorm 2016.3

Answer 1

您可以使用Edit Angular2HTML Fragment意向：

要拿出來，只需點擊Ctrl+Enter在字符串上。 它將打開編輯器，您可以在其中對代碼進行美化，並且更改將反映在字符串中。