CODEWITHSUNDEEP
typescriptformatwebstorm
Cristian C.
Cristian C.

Reputation: 828

Auto formatting html in a template

Is there any way to automatically format/tab html code wrapped in backticks (`)?

Suppose I'm using an HTML template:

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

And for simplicity's sake, I have a different file that holds my html for the template:

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

thats what the html would look like if I dont manually tab every line that deserves a sweet sweet tab (or 4 spaces for you heathens). However, I'd like the code to auto format, say, like this:

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

Does WebStorm offer me any feature like this?

The autoformat shortcut Ctrl+Alt+L doesn't seem to do the trick.

Also while we're talking about templates, is there any way to remove that ghastly green background appearing around the templated code (Darkula theme)? enter image description here

Upvotes: 0

Views: 594

Answers (1)

No&#233;mi Sala&#252;n
No&#233;mi Sala&#252;n

Reputation: 5036

The green color come from Settings > Editor > Color & Fonts > General then in the right tab Code > Injected language fragment

To auto-format this kind of fragment, you have to edit it separatly. Place your cursor anywhere inside the template, press ALT+ENTER then choose Edit HTML fragment. In the new tab you can use CTRL+ALT+L.

Upvotes: 3

Related Questions