JSXの属性値をコードフォーマッターで自動改行したい（インデントも）

Question

前提・実現したいこと

VSCodeエディタで、TypeScript + Reactのコードを書いています。

コードフォーマッター（自動整形）がうまくいかず困っています。

JSXタグの属性値を改行したいのですが、自動整形機能のせいで改行無しの状態に戻されてしまいます。

なんとか改行できるように設定を変更すると、今度は自動インデントの機能が効かなくなってしまいます。

・属性値が複数ある場合は改行をする
・自動インデントを有効にする
これを両立させたいです。

発生している問題・該当のソースコード

<img src={logo} className='App-logo' alt='logo' /> の部分に注目して以下をご覧ください。

// App.tsxの中身1
function App() {
  return (
    <div className='App'>
      <header className='App-header'>
// 最初の状態
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

// App.tsxの中身2
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className='App'>
      <header className='App-header'>

// この状態にしたい（属性値を改行したい）
        <img
          src={logo}
          className='App-logo'
          alt='logo'
        />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

// App.tsxの中身3
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className='App'>
      <header className='App-header'>

// こうなってしまう（改行するとインデント機能が効かない）
        <img
src={logo}
className='App-logo'
alt='logo' />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

試したこと

Windows 8.1 の環境で
コマンドプロンプトからtypescriptのreactプロジェクトを作成。

create-react-app my-app --template typescript

App.tsxはこのタイミングで自動的に生成される。

my-appフォルダに.eslintrcというファイルを作成。
.eslintrcの中に以下の内容を記述。

// .eslintrcの中身
{
    "extends": "react-app",
    "rules": {
        "react/jsx-first-prop-new-line": [1, "multiline"],
        "react/jsx-max-props-per-line": [1,
            {
                "maximum": 1
            }
        ]
      }
}

"react/jsx-max-props-per-line"の設定により、JSXの属性が2個以上あるときは、自動改行されるようになります。
VSCodeでファイルを保存した瞬間に改行され、「App.tsxの中身3」の状態になります。

これに加えて、自動インデント機能を有効にしようと、settings.jsonの中に
"editor.formatOnSave": true
という記述を追加しました。

これにより自動インデントなどの機能は有効になるのですが、
ファイルを保存したタイミングで、「App.tsxの中身1」の状態になってしまいます。

おそらく、editorconfigもしくはprettierの
「1行は80文字を越えるときは自動的に改行する」という機能のせいで
80文字以内に収まるときは改行を強制的に無効化されている気がします。

JSXタグの属性値を改行しつつ、インデントもさせたいのですが、editorconfigとprettierとeslintのどの機能がどう干渉しあっているのか特定できていません。

いまは、App.tsxファイルを保存した瞬間に画面が一瞬ちらついて、
imgタグの部分が一瞬だけ下記の状態になり、

        <img
src={logo}
className='App-logo'
alt='logo' />

最終的には下記の状態になっているっぽいです。

        <img src={logo} className='App-logo' alt='logo' />

このことから、.eslintrcの
"react/jsx-max-props-per-line"
の設定がまず最初に適用されて、
その後に、editorconfigかpretteirがコードを再フォーマットしているっぽいです。

        <img
          src={logo}
          className='App-logo'
          alt='logo'
        />

こういう感じのコード整形がされるようにするには、何をどう設定すればいいのでしょうか？

補足情報（FW/ツールのバージョンなど）

VSCodeに以下のエクステンションを入れています。
・EditorConfig for VS Code
・ESLint
・Prettier - Code formatter