Same for me, I managed to solve it with:

    {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
        "editor.formatOnType": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        }
    }

This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.

The part responsible for Prettier formatting html:

  "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        },

To open type Ctrl+Shift+P, then type open user/workspace settings JSON in the command line.

Prettier has the option printWidth. If you set that option to a high number, it will break fewer lines.

In your .prettierrc.json file, you can override this option for your HTML files:

{
  // Other options...
  "overrides": [
    {
      // change .html with .vue if you are using Vue files instead of HTML
      "files": "src/**/*.html", 
      "options": {
        "printWidth": 140
      }
    }
  ]
}

Is not recommendable to use a line-lenght higher than 140. Prettier is opitionated, so it should be used without too many customizations.

You can set htmlWhitespaceSensitivity to "ignore" in your options. See https://prettier.io/docs/en/options.html#html-whitespace-sensitivity.

return prettier.format(source, { 
        parser: 'html', 
        plugins: [htmlParser], 
        tabWidth: 2, 
        htmlWhitespaceSensitivity: "ignore"
    });

The output doesn't look exactly like you wanted it, but closer.

<li>
  <p style="margin: 0">
    123321
    <a href="https://123">123</a>
    (
    <a href="https://abc">abc</a>
    )
  </p>
</li>
<li>
  <p style="margin: 0"><a href="https://xyz">xyz</a></p>
</li>