WebStorm: Как приукрасить HTML в кавычки внутри JavaScript файла

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 на строке. Он откроет редактор, где вы можете преффицировать код, и изменения будут отражены в строке.