Форматировать html-код в коде Visual Studio, чтобы атрибуты находились в отдельных строках?

Кажется, что нет параметров форматирования для vscode. Я хочу, чтобы иметь возможность форматировать html, чтобы мой html отображался как:

<div attrib1=value1
     attrib2=value2
     attrib3=value3>
  Content
</div>

Это одна функциональность, которая мне очень понравилась бы!

Ответы

Ответ 1

VSCode добавил способ сделать это сейчас. Вы можете отредактировать settings.json, а затем добавить следующее для желаемого эффекта:

"html.format.wrapAttributes": "force-aligned"

--или--

"html.format.wrapAttributes": "force"

принудительное выравнивание также добавит отступы, чтобы выровнять его с атрибутом в строке, где был открыт тег.

Посетите эту ссылку для получения дополнительной информации или обновлений.

Ответ 2

Существуют разные расширения "форматирования", но я нашел подходящую работу для этого точного форматирования, которое вы ищете. Он называется " vscode-tidyhtml".

https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml

  • Нажмите на значок Расширения с левой стороны
  • Поиск и установка "vscode-tidyhtml", перезагрузка кода Visual Studio
  • Нажмите клавишу "F1", а затем введите "TidyHtml", нажмите Enter

Он должен форматировать HTML, чтобы атрибуты находились на разных строках. Я не уверен, что он хорошо работает для других типов файлов.

Ответ 3

Мой расширенный html ограничивался настройкой "Prettier: Print width", я думал, что я бы поставил случайное значение равным 0, но тогда все теги начнут ломать атрибуты. Поэтому он поставил 10000. Это решило мою проблему.

Ответ 4

Я не мог найти никакого способа сделать это в VS-2015, для html-документов; , но вы можете использовать этот параметр для XML-документов:

Tools > Options > XML > Formatting

Затем установите параметр "Выровнять атрибуты каждый на отдельной строке".

Теперь вам нужно щелкнуть правой кнопкой мыши в своем html файле в обозревателе решений и выбрать Open With... затем выберите XML (Text)Editor.

Теперь вы можете использовать короткую клавишу кода форматирования в своем документе (по умолчанию это Ctrl + K, D)

До:

<button type="button" class="btn btn-large btn-floating indigo waves-effect waves-light button-back"
        ng-click="self.changeState('EvaluationTerms.View')" tooltip-placement="top" >

После:

<button type="button"
        class="btn btn-large btn-floating indigo waves-effect waves-light button-back"
        ng-click="self.changeState('EvaluationTerms.View')"
        tooltip-placement="top">