Auto Formatierung HTML in einer Vorlage

Question

Gibt es eine Möglichkeit, automatisch formatieren/Tab HTML-Code in Backticks (`) gewickelt?

Angenommen, ich bin mit einem HTML-Template:

@Component({ 
    selector: "xyz", 
    template: htmlTemplate 
}) 

Und der Einfachheit halber, ich habe eine andere Datei, die mein html für die Vorlage hält:

export const htmlTemplate = ` 
<div> 
<div> 
<div></div> 
<div></div> 
</div> 
<div> 
</div> 
</div> 
` 

das ist, was die html würde sehen Sie aus, wenn ich nicht jede Linie manuell annulme, die einen süßen süßen Vorsprung verdient (oder 4 Räume für Sie Heiden). Allerdings würde ich den Code zu Autoformat wie, sagen wir, wie folgt aus:

export const htmlTemplate = ` 
<div> 
    <div> 
     <div></div> 
     <div></div> 
    </div> 
    <div> 
    </div> 
</div> 
` 

Hat WebStorm bietet mir jede Funktion wie diese? Die Autoformat-Verknüpfung Ctrl + Alt + L scheint nicht den Trick zu tun.

Auch wenn wir über Vorlagen sprechen, gibt es eine Möglichkeit, diesen grässlichen grünen Hintergrund zu entfernen, der um den Vorlagencode (Darkula-Thema) herum erscheint?

Answer 1

Die grüne Farbe aus Einstellungen kommen> Editor> Farbe & Schriftarten> Allgemein dann im rechten Tab -Code> injizierte Sprache Fragment

Um auto-Format diese Art von Fragmente, müssen Sie bearbeite es separat. Platzieren Sie den Cursor irgendwo innerhalb der Vorlage, drücken Sie ALT + Geben Sie ein und wählen Sie dann HTML-Fragment bearbeiten. Im neuen Tab können Sie CTRL + ALT + L verwenden.