vscode does not format the content of nextjs into multiple lines

I expected

<Image
 alt=""
 src="/img/logo.svg"
 width="30"
 height="30"
 className="d-inline-block align-top"
 />

but now it is

<Image alt="" src="/img/logo.svg" width="30" height="30" className="d-inline-block align-top"/>

.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

setting.json

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

when i put "plugin:prettier/recommended" Replace with "prettier" or don’t even use "prettier" and just use "next/core-web-vitals" which will successfully get the results I want, but the code in vscode will no longer show red underlines to indicate errors.

I have installed eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

The eslint and prettier plug-ins of vscode are also installed.

What is the problem? Thanks