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

Answers:

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.