WebStorm：如何用JavaScript文件中的引号来美化HTML [英] WebStorm: How to prettify HTML in quotes within a JavaScript file

问题描述

我的 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？

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

我已经尝试过：代码>自动缩进行和代码>重新格式代码

我正在使用 WebStorm 2016.3

推荐答案

您可以使用编辑Angular2HTML片段意图：

要点亮它，只需点击字符串上的 Ctrl + Enter 。
它将打开编辑器，你可以在那里美化代码，更改将反映在字符串中。

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.

这篇关于WebStorm：如何用JavaScript文件中的引号来美化HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！