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

This topic created in 1180 days ago, the information mentioned may be changed or developed.

请教一下
今天一开 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>

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

div

template

VSCode

懵逼

2 replies 2023-02-16 11:08:27 +08:00

silkriver

Feb 16, 2023

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

thinkershare

Feb 16, 2023

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

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

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