如何将 HTML 属性格式化为多行？ [复制]答案

【问题标题】：How to format HTML attributes to be on multiple lines? [duplicate]如何将 HTML 属性格式化为多行？ [复制]
【发布时间】：2020-04-13 03:33:24
【问题描述】：

我的 html 代码格式如下：

<a href="#step-1" id="accountInfoTab" role="tab" aria-controls="accountInfo"
  :aria-expanded="activeSection == 'step-1' ? 'true': 'false'" @click="triggerActiveSection('step-1')">
  <span class="step-no hidden-sm hidden-xs"
    v-html="$options.filters.i18n('registration-form-label-tab-step-1')"></span>
  <span class="hidden-sm hidden-xs">{{ "registration-form-label-tab-account-info" | i18n }}</span>
</a>

我想将我的代码重新格式化为以下格式：

<a
  href="#step-1"
  id="accountInfoTab"
  role="tab"
  aria-controls="accountInfo"
  :aria-expanded="activeSection == 'step-1' ? 'true': 'false'"
  @click="triggerActiveSection('step-1')">
  <span class="step-no hidden-sm hidden-xs" v-html="$options.filters.i18n('registration-form-label-tab-step-1')"></span>
  <span class="hidden-sm hidden-xs">{{ "registration-form-label-tab-account-info" | i18n }}</span>
</a>

在 VScode 或任何其他工具中是否有键盘快捷键或任何其他方式（除了手动间隔代码，因为它需要很长时间）？

【问题讨论】：

标签： html visual-studio-code formatting

【解决方案1】：

你可以在编辑器中去extensions搜索prettier然后安装。然后您无需设置任何内容，只需转到您的代码并按 shift + i 或 shift+alt+f 即可。干杯!你的代码格式很好。

https://prettier.io/

【讨论】：

【解决方案2】：

在此处查看解决方案（应该像编辑 settings.json 一样简单）：Format html code in Visual Studio Code such that attributes are on separate lines?

【讨论】：