关于 vscode 下使用 volar 插件的问题

[qq309187341]

请教一下
今天一开 vscode 发现格式化出问题了。

原本
<template>
<div>1234</div>
</template>

现在直接变成一行了。。。。
<template><div>1234</div></template>

如果是
<template>
<div>1111</div>
<div>2222</div>
</template>

也会变成如下了
<template>
<div>1111</div>
<div>2222</div>
</template>

什么情况？？？请问如何设置回去！！一脸懵逼，我也没有配置过呀。现在这个样子看着很难受

[silkriver]

在扩展面板搜索 Prettier 安装，vue 官方代码风格配置大概如下
{
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
}

[thinkershare]

Volar 配合 ESLint 检测代码风格(不要始于它格式化), 使用 Prettier 完成格式
.eslintrc.json 配置 ESLint
.prettierrc 配置 Prettier

所有文件都选择使用 Prettier 完成格式化，不要使用 VSCode 默认的格式化器。

另外安装下面四个插件
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",