How to change eslint rule for prettier (project made on normal Vue CLI)?

Question

JavaScript

You need to make eslint check that the attributes are transferred to the new line:

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

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

Established eslint Vue CLI for prettier considers this a mistake

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

Error code, more precisely warnings:

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

How can this be fixed? Where to even dig?
For Prettier, we set this formatting via '"wrapAttributes": true' in .prettierrc, but how can we remove the eslint warning for these cases?
Usually in eslint you can see the names of the rules that can be configured. There is 1 rule for all prettier rules

// .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

Maybe someone will need it.
Prettier breaks lines if they are longer than 80 characters (printWidth).
Therefore, we add prettier.config.jsto the root of the project and the corresponding config:

module.exports = {
  printWidth: 120
};