vue prettier/eslint конфликт whitespace newline

Всем привет, столкнулся с проблемой, что вместе prettier и eslint, не могут корректно работать с инлайновыми элементами, точнее с пробелом пустой строки. Когда я пишу:

<template>
  <p
    ...manyAttrs
  >{{ text }}</p>
</template>

То prettier форматирует этот кусок кода, как:

<template>
  <p
    ...manyAttrs
  >
    {{ text }}
   </p>
</template>

В eslint же, есть опция 'vue/multiline-html-element-content-newline', которая предотвращает это поведение для списка тегов, для которых не нужно это делать. Если я запущу первый фрагмент кода с eslint, то не будет никаких изменений со следующей конфигурацией:

'vue/multiline-html-element-content-newline': [
  'warn',
  {
    ignoreWhenEmpty: false,
    allowEmptyLines: false,
    ignores: ['p', 'span', 'a']
  },
],

Вопрос в следующем: как подружить prettier и eslint конкретно в этом поведении, чтобы в итоге для определенных тегов не было никаких переносов на новую строку?

Пока что единственное решение, которое сработало, это обернуть содержимое в <template>, тогда никаких лишних пробелов нет, но кажется, что это костыль. Проблема еще и в том, что при таком поведении невозможно использовать :empty в css, так как при пустой переменной text, внутри тега p будет всегда один лишний пробел


Ответы (0 шт):