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。它将打开编辑器，您可以在其中美化代码，更改将反映在字符串中。

WebStorm：如何在 JavaScript 文件中用引号美化 HTML

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

html

javascript

webstorm