Отформатируйте HTML в VSCode так же, как в Visual Studio

Question

Я ищу способ настроить VSCode для форматирования HTML (и файлов разметки в целом, например, .vue) таким же образом, как это делает Visual Studio.

Например, в Visual Studio, еслиЯ пишу что-то вроде:

<div id="testid" class="test" style="display: block;">
    <p class="p1"></p>
</div>

Я могу решить, где прервать строку атрибута, поэтому, если я вставлю новую строку после класса, у меня будет:

<div id="testid" class="test" 
     style="display: block;">
    <p class="p1"></p>
</div>

Или я могуразбить строку после идентификатора:

<div id="testid" 
     class="test" style="display: block;">
    <p class="p1"></p>
</div>

и т. д. *

Дело в том, что Visual Studio знает о новой строке, которую я вставляю, поэтому, если я нажму CTRL + K, CTRL +D он фактически отформатирует мой документ, но будет поддерживать новую строку, как я выберу, а атрибуты на новой строке просто выравниваются по первому атрибуту в строке тега.

Это то, что я не могу эмулировать в VSCodeЯ попробовал встроенный форматер, Prettier и Beautify ...

Есть ли способ сделать это?

РЕДАКТИРОВАТЬ

As @ Mr_b194предложил я попробовал расширение HTML Format.По сравнению с Beautify этот фактически сохраняет символы новой строки между атрибутами, но первый атрибут в новой строке просто имеет отступ (4 символа в моем случае), в результате чего он не выравнивается по верхней строке:

    <div id="testid"
        class="test" style="display: block;">
        <p class="p1"></p>
    </div>

VisualStudio выравнивает атрибут 'class' с 'id' строки до этого.

Answer 1

Хорошо, я нашел способ!

Я использовал версию 1.4.7 Расширение Beautify , и произошло смещение схемы для intellisense файла .jsbeautifyrc, которое былоне показывая вам все параметры для свойства wrap_attributes.

Я открыл проблему на github и ребята, где супер быстро, они уже выпустили 1.4.8, который правильно показывает значение preserve-aligned Iискал.

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

{
    "preserve_newlines": true,
    "wrap_attributes": "preserve-aligned"
}

И он будет работать.

Как яискал также поддержку .vue, вы можете настроить Vetur:

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "preserve_newlines": true,
        "wrap_attributes": "preserve-aligned"
    }
}

И будет работать так же.

Answer 2

Перейти к расширению в коде Vs и установить формат HTML.Нажмите кнопку перезагрузки, это поможет отформатировать весь HTML-код