如何使用Tidy缩进VueJS HTML5代码且不破坏代码内容

问题描述 #

使用Tidy工具格式化VueJS模板代码时，会出现标签和属性被误删的情况：

• <button>标签及其内部<i>标签被移除
• Vue的语法糖属性:to被删除，即使改用完整的v-bind:to语法，按钮标签仍丢失
• 标签格式被错误打乱

原始Vue模板代码（短语法版本） #

<tbody>
  <tr v-for="task in tasks">
    <td><strong>{{task.title}}</strong></td>
    <td>{{task.description}}</td>
    <td>
      <button class='btn btn-outline-primary btn-sm m-1 mb-2'
      @click="delTasks_button(task);"><i class="fa fa-remove"></i></button>
      <router-link :to="{ name: 'edit', params: {id: task.id}}" class="btn
      btn-outline-primary btn-sm m-1 mb-2"><i class="fa
      fa-pencil"></i></router-link>
    </td>
  </tr>
</tbody>

错误的Tidy执行命令 #

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

损坏后的输出结果 #

<table>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <router-link class=
        "btn btn-outline-primary btn-sm m-1 mb-2"></router-link>
      </td>
    </tr>
  </tbody>
</table>

改用完整v-bind:to语法后的原始代码 #

<table class='table table-striped'>
  <thead>
    <tr class="table-dark">
      <td scope='col'>title</td>
      <td scope='col'>description</td>
      <td scope='col'>action</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <button class='btn btn-outline-primary btn-sm m-1 mb-2'
        @click="delTasks_button(task);"><i class="fa fa-remove"></i></button>
        <router-link v-bind:to="{ name: 'edit', params: {id: task.id}}" class="btn
        btn-outline-primary btn-sm m-1 mb-2"><i class="fa
        fa-pencil"></i></router-link>
      </td>
    </tr>
  </tbody>
</table>

仍损坏的输出结果 #

<table class='table table-striped'>
  <thead>
    <tr class="table-dark">
      <td scope='col'>title</td>
      <td scope='col'>description</td>
      <td scope='col'>action</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <router-link v-bind:to=
        "{ name: 'edit', params: {id: task.id}}"
                     class=
                     "btn btn-outline-primary btn-sm m-1 mb-2">
                     </router-link>
      </td>
    </tr>
  </tbody>
</table>

解决方法 #

问题根源是Tidy默认不识别Vue的自定义指令（如@click、:to）和自定义标签（如router-link），需要通过配置参数告知Tidy保留这些内容。

正确的Tidy命令 #

tidy -i \
  --doctype html5 \
  --show-body-only yes \
  --indent-attributes yes \
  --show-warnings no \
  --quiet yes \
  --new-inline-tags router-link \
  --custom-attributes "@*:*,v-*:*,:*" \
  --preserve-whitespace yes \
  sample_vue.html

参数说明 #

• --doctype html5：指定HTML5文档类型，避免Tidy使用旧版HTML规则解析
• --new-inline-tags router-link：将router-link标记为合法的行内标签（如果需要块级则改用--new-blocklevel-tags）
• --custom-attributes "@*:*,v-*:*,:*"：允许所有以@（事件绑定）、v-（指令）、:（语法糖）开头的属性
• --preserve-whitespace yes：保留模板中的空白字符，避免破坏Vue模板的结构
• -i/--indent-attributes yes：保持缩进和属性换行的格式要求

执行后效果 #

使用上述命令后，Tidy会正确保留所有Vue标签、指令和属性，同时完成代码格式化：

<table class='table table-striped'>
  <thead>
    <tr class="table-dark">
      <td scope='col'>title</td>
      <td scope='col'>description</td>
      <td scope='col'>action</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="task in tasks">
      <td><strong>{{task.title}}</strong></td>
      <td>{{task.description}}</td>
      <td>
        <button class='btn btn-outline-primary btn-sm m-1 mb-2'
                @click="delTasks_button(task);">
          <i class="fa fa-remove"></i>
        </button>
        <router-link :to="{ name: 'edit', params: {id: task.id}}"
                     class="btn btn-outline-primary btn-sm m-1 mb-2">
          <i class="fa fa-pencil"></i>
        </router-link>
      </td>
    </tr>
  </tbody>
</table>

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