Форматирование HTML код в HTML/JSX/TSX с помощью VSCode

Я использую стандартный форматер кода от VSCode, меня вроде все устраивает, но почему-то HTML код внутри JSX/TSX не форматируется. В моем случае это перенос атрибутов на новую строку.

Возьмем в пример этот код:

import React, { ChangeEvent, useState } from 'react';

const App: React.FC = () =>
{
    const [ value, setValue ] = useState<string>('My app');
    const [ title, setTitle ] = useState<string>(value);

    const onInput = ({ target }: ChangeEvent<HTMLInputElement>): void =>
    {
        setValue(target.value);
    };

    const onClick = () =>
    {
        setTitle(() => value);
    };


    return (
        <>
            <h1>{title}</h1>

            <input onInput={onInput} value={value} />
            <button onClick={onClick}>Click</button>
        </>
    );
};

export default App;

Я не получаю перенос атрибутов внутри <input>, но если же его отформатировать в html файле:

<input onInput={onInput}
       value={value} />

И еще хотелось бы, чтобы атрибуты все были с новой строки только если превышена какая-то длина или кол-во атрибутов.
Так же хотелось бы, чтобы аргументы функций переносились на новые строки, это возможно сделать?

Для html выставлены такие настройки:

"html.format.maxPreserveNewLines": 2,
"html.format.wrapAttributes": "force-aligned",
"html.format.wrapLineLength": 80,

Для js/ts:

"typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
"typescript.format.semicolons": "insert",