如何通过Tidy实现VueJS HTML代码的属性整齐对齐？

我在用Tidy工具格式化Vue的HTML代码，已经通过带参数的Tidy命令（可在Vim中执行）完成初步格式化，但标签属性的对齐不够规整，希望把多行属性调整为统一对齐的格式。

原始代码 #

<div class="row mb-3 align-items-center">
<label for="titleInput" class="col-sm-2 col-form-label">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="titleInput" placeholder="Enter title" v-model="title_put" required>
</div>
</div>
<div class="row mb-3 align-items-center">
<label for="descriptionTextarea" class="col-sm-2 col-form-label">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" id="descriptionTextarea" rows="3"
         placeholder="Enter description" v-model="description_put" required></textarea>
  </div>
</div>
<input type="hidden"
placeholder="id" name="id_put" v-model="id_put">
<button  class='btn btn-primary m-1 mb-2'       v-on:click="putTasks()">update tasks</button>
<router-link class='btn btn-primary m-1 mb-2' to="/">Return Home</router-link>
</form> 

当前使用的Tidy命令 #

Vim中执行的命令 #

:'<,'>!tidy -i --custom-tags blocklevel --doctype omit --show-body-only yes --indent-attributes yes --show-warnings no -q

终端命令 #

$ tidy -i --custom-tags blocklevel --doctype omit   \
       --show-body-only yes --indent-attributes yes \
       --show-warnings no -q

当前格式化效果 #

<form>
  <div class="row mb-3 align-items-center">
    <label for="titleInput"
         class="col-sm-2 col-form-label">Title:</label>
    <div class="col-sm-10">
      <input type="text"
           class="form-control"
           id="titleInput"
           placeholder="Enter title"
           v-model="title_put"
           required="">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="descriptionTextarea"
         class="col-sm-2 col-form-label">Description:</label>
    <div class="col-sm-10">
      <textarea class="form-control"
           id="descriptionTextarea"
           rows="3"
           placeholder="Enter description"
           v-model="description_put"
           required=""></textarea>
    </div>
  </div><input type="hidden"
        placeholder="id"
        name="id_put"
        v-model="id_put"> <button class='btn btn-primary m-1 mb-2'
        v-on:click="putTasks()">update tasks</button>
  <router-link class='btn btn-primary m-1 mb-2'
               to="/">Return Home</router-link>
</form>

期望的属性对齐效果 #

效果一（对齐到标签内容起始列） #

<div class="col-sm-10">
      <textarea class="form-control"
                id="descriptionTextarea"
                rows="3"
                placeholder="Enter description"
                v-model="description_put"
                required=""></textarea>

效果二（统一缩进固定空格） #

<div class="col-sm-10">
      <textarea class="form-control"
        id="descriptionTextarea"
        rows="3"
        placeholder="Enter description"
        v-model="description_put"
        required=""></textarea>

解决方法 #

方法1：Tidy配合Vim正则替换补全对齐

Tidy本身的indent-attributes参数只能将属性缩进至标签的起始位置，无法直接实现统一列对齐。可以在执行Tidy格式化后，在Vim中运行以下正则命令来调整：

实现效果一（对齐到标签内容起始列）

:g/^\s*<[^>]*\s\+[^>]*$/,/^\s*[^<]/s/^\s*/\=repeat(' ', strlen(getline(line('.')-1)) - strlen(substitute(getline(line('.')-1), '^\(\s*\).*', '\1', '')))/

这条命令会自动将标签后的多行属性对齐到标签内容的起始列，和你期望的效果一一致。

实现效果二（固定缩进4个空格）

如果希望属性统一在标签行基础上加4个空格缩进，运行：

:g/^\s*<[^>]*\s\+[^>]*$/,/^\s*[^<]/s/^\s*/\=substitute(getline(line('.')-1), '^\(\s*\).*', '\1', '') . '    '/

方法2：替换为Prettier工具（更适合Vue场景）

Tidy对Vue自定义指令（如v-model、v-on）的支持有限，属性对齐功能不够灵活。Prettier专门针对前端代码格式化，对Vue的HTML部分支持更完善，能自动实现规整的属性对齐。

在Vim中使用Prettier的步骤：

1. 安装Prettier：npm install -g prettier
2. 直接在Vim中执行格式化命令：

:'<,'>!prettier --parser vue

Prettier会自动将属性整理为统一对齐的格式，完全符合需求。

内容的提问来源于stack exchange，提问作者user3313834