如何使用 tidy 缩进 vueJS HTML5 而不破坏/删除部分内容

Question

在这个 VueJS 代码上运行 tidy 会完全破坏它：

VueJS HTML 源代码：

$ cat sample_vue.html
...
      <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 -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>

如您所见，

<button

被移除，

:to=

和内部

<i >

也被移除；(

如果我避免对

:to=

使用缩短的

v-bind:to=

语法，

v-bind:to=

会被保留，但全局结果样式会被破坏:

因此（使用完整的

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

我们仍然得到损坏的输出

<button

被删除，内部

<i>

被删除：

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

Answer 1

我没有

@click

的解决方案，也没有

:to=

的解决方案，但如果我们用 no

替换它们

快捷方式 VueJS 语法

v-on:click=

和

v-bind:to=

然后使用这个整洁的选项：

$ tidy -i --custom-tags blocklevel --doctype omit   \

       --show-body-only yes --indent-attributes yes \

       --show-warnings no 

       --drop-empty-elements no

       -q sample_vue.html

我们从这个输入中得到：

$ cat sample_vue.html

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

            v-on:click="delTasks_button(task);"><i class="fa fa-remove"></i></button>

            <router-link b-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>

        <button class='btn btn-outline-primary btn-sm m-1 mb-2'

            v-on:click="delTasks_button(task);"><i class=

            "fa fa-remove"></i></button>

        <router-link b-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>