Hamster Hamster - 16 days ago 8
HTML Question

WebStorm: How to prettify HTML in quotes within a JavaScript file

I have the following block in my

app.component.ts
file:

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


How can I tell WebStorm to prettify my JS as well as the HTML that is inside the quotes?

I have already tried:
Code > Auto-indent Lines
and
Code > Reformat Code


I am using WebStorm 2016.3

Answer

You can use Edit Angular2HTML Fragment intention:

enter image description here

To bring it up, just click Ctrl+Enter on the string. It will open editor, where you can prettify code and the changes will be reflected in the string.

Comments