prettier: Conflict with eslint-plugin-vue recommended rules

Prettier 1.15.1 Playground link

--html-whitespace-sensitivity ignore
--parser vue
--single-quote

Input:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown
            trigger="click"
            @command="handleCommand"
          >
            <button
              type="button"
            >
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">{{ $t('delete') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div  v-if="!isFirst" class="e-cInput__action e-cInput__action--move"
        >
          <button

            type="button"
            @click="$emit('move-up')"
          >
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div
          v-if="!isLast"
          class="e-cInput__action e-cInput__action--move"
        >
          <button
            type="button"
            @click="$emit('move-down')"
          >
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content">
      <slot />
    </div>
  </article>
</template>

Output:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown trigger="click" @command="handleCommand">
            <button type="button">
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">
                {{ $t('delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="!isFirst" class="e-cInput__action e-cInput__action--move">
          <button type="button" @click="$emit('move-up');">
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div v-if="!isLast" class="e-cInput__action e-cInput__action--move">
          <button type="button" @click="$emit('move-down');">
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content"><slot /></div>
  </article>
</template>

Expected behavior:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown 
            trigger="click" 
            @command="handleCommand"
          >
            <button type="button">
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">
                {{ $t('delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div 
          v-if="!isFirst" 
          class="e-cInput__action e-cInput__action--move"
        >
          <button 
            type="button" 
            @click="$emit('move-up');"
          >
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div 
          v-if="!isLast" 
          class="e-cInput__action e-cInput__action--move"
        >
          <button 
            type="button" 
            @click="$emit('move-down');"
          >
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content"><slot /></div>
  </article>
</template>

eslint-plugin-vue with recommended settings requires html-attributes on seperate lines if an element has more than one attribute: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-attributes-per-line.md

is there a prettier-option to prevent errors by prettier?

  ✘  https://google.com/#q=prettier%2Fprettier  Replace `⏎··········v-if="!isLast"⏎··········class="e-cInput__action·e-cInput__action--move"⏎········` with `·v-if="!isLast"·class="e-cInput__action·e-cInput__action--move"`