Автоматическое форматирование html в шаблоне

Question

Есть ли способ автоматически форматировать/tab html-код, заключенный в backticks (`)?

Предположим, я использую шаблон HTML:

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

И ради простоты, у меня есть другой файл, который содержит мой HTML для шаблона:

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

вот что HTML будет выглядите, если я не вручную закрою каждую строку, которая заслуживает сладкой сладкой вкладки (или 4 пространства для вас, язычники). Однако, я хотел бы код для автоматического формата, скажем, так:

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

предлагает ли WebStorm мне какую-либо функцию, как это? Ярлык autoformat Ctrl + Alt + L похоже, что не обманом.

Также, когда мы говорим о шаблонах, есть ли способ удалить этот ужасный зеленый фон, появляющийся вокруг шаблонного кода (тема Darkula)?

Answer 1

Зеленый цвет приходят из Настройки> Редактор> Color & Шрифты> Общие затем на вкладке правой фрагмент Code> Введенный язык

Для авто-формата, этот вид фрагмента, вы должны отредактируйте его отдельно. Поместите курсор в любом месте шаблона, нажмите ALT + ENTER затем выберите Редактировать фрагмент HTML. На новой вкладке вы можете использовать CTRL + ALT + L.