Fromatting html spacing in vscode

I have my html code in the following format:

<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>

I want to reformat my code to the following format:

<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>

Is there a keyboard shortcut or any other way to do it (except manually spacing the code since it is going to take ages) in VScode or any other tools out there?