Hamster Hamster - 3 months ago 38
HTML Question

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

I have the following block in my


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

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
Code > Reformat Code

I am using WebStorm 2016.3


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.