Как изменить правило eslint для prettier (проект сделан на обычном Vue CLI)?

Question

[bormor]

Нужно сделать eslint проверку того что атрибуты переносятся на новую линию:

<template>
  <!-- ✓ GOOD -->
  <MyComponent
    lorem="1"
    ipsum="2"
  />

  <!-- ✗ BAD -->
  <MyComponent lorem="1" ipsum="2"/>
</template>

Штатный eslint Vue CLI для prettier это считает ошибкой

<button
  @click="test"
  class="test"
  ref="test"
/>

Код ошибки, точнее warnings:

Replace `⏎······@click="test"⏎······class="test"⏎······ref="test"⏎····` with `·@click="test"·class="test"·ref="test"` eslint(prettier/prettier)

Как это можно исправить? Куда хоть копать?
Для Prettier такое форматирование мы задаем через '"wrapAttributes": true' в .prettierrc, но как убрать для этих случаев eslint warning?
Обычно в eslint видны названия правил которые можно настроить. Тут 1 правило для всех правил prettier

// .eslintrc
module.exports = {
  root: true,
  env: {
    node: true
  },
  //other options: 'plugin:vue/essential', 'plugin:vue/strongly-recommended', 'plugin:prettier/recommended'
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Answer 1

[Артур Гиляновский]

Может кому надо будет.
Prettier рвёт строки, если они длиннеё чем 80 символов (printWidth).
Поэтому добавляем prettier.config.js в корень проекта и соответствуюющий конфиг:

module.exports = {
  printWidth: 120
};

Answer 2

[Alex]

Никто здесь толком не ответил. Вставлю я свои 5 копеек...

Добавляется правилом в .prettierrc.js

module.exports = {
  singleAttributePerLine: true, // один атрибут на строку ('false')
}

Я использую такие правила, мне удобно, может кому пригодится (в скобках значения по умолчанию, которые как раз и меняются вот этими правилами):
120 - относительно длинная строка - удобно, когда в шаблоне есть какой тег p не слишком длинный, чтобы нужно было его переносить. В html уже ругаться не будет, но при этом всё что имеет больше одного атрибута уже будет с переносом на новую строку.

module.exports = {
  semi: false, // использовать точку с запятой ('true')
  singleQuote: true, // использовать одинарные кавычки ('false')
  printWidth: 120, // длина переноса строки (80)
  singleAttributePerLine: true, // один атрибут на строку ('false')
  // arrowParens: 'avoid', // заключать ли в скобки стрелочную функцию (x) => x ('always|avoid')
  // trailingComma: 'all', // висящие запятые ('es5', 'es5|none|all')
  // bracketSameLine: true, // перенос > на другую строку при длинной строке ('false')
}

А .eslintrc.js можно тоже немного поправить:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/require-default-prop': 'off', //требовать для props дефолтных значений, кроме Boolean значений
    'vue/no-v-html': 'off', //предупреждения о возможной уязвимости посредством XSS атаки
    'no-undef': 'off', //ошибка объявления переменной
  },
}

v-html не очень советую изменять, но если приходится использовать element ui, то там есть компоненты где надо вставлять как раз через v-html, тогда включайте это правило тоже.