如何使用VS代码中的Prettier在vue中强制执行每个属性的新行

Question

我目前在VSCode中使用Vue的Prettier版本：9.5.0。

这是我当前的代码

<q-select label="Fruits" :options="['apple', 'mango']" />

这就是我希望Prettier在保存时自动将其格式化的内容

<q-select 
label="Fruits" 
:options="['apple', 'mango']"
/>

根据这些发行说明，到目前为止，我已经尝试在VSCode中的settings.json文件中使用singleAttributePerLine选项。然而，它不起作用，VSCode无法识别此配置。我在Prettier扩展的设置菜单中也找不到此设置。我也试着把这个选项放在.editorconfig文件中，但没有结果

我的settings.json文件配置

"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleAttributePerLine":true,

Answer 1

我也遇到了同样的问题，但最终我发现，当我安装Volar时(我想(，它一定已经将此添加到了我的settings.json中。它似乎超过了其他编辑器.defaultFormatter.

"[vue]": {
"editor.defaultFormatter": "Vue.volar"
}

我把它改成：

"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

Prettier现在按预期工作。

Answer 2

对于使用"volar"但不想使用"漂亮"或其他扩展的人，可以通过将其添加到"settings.json"中来实现这一点：

"html.format.wrapAttributes": "force-expand-multiline"

或者，您可以使用以下选项：

• force：包裹除第一个属性外的每个属性
• 强制对齐：包裹除第一个属性外的每个属性并保持对齐

如本答案所述：https://stackoverflow.com/a/52669475/812919

Answer 3

Danny Connell(YT上的Vue教育家，Udemy(也遇到了同样的问题，并编写了一个名为"的VS代码扩展；拆分HTML属性"；它将具有多个属性的起始标记格式化为每行一个属性。选择整个起始标签(里面有属性(，然后按ctrl+shift+alt+A，你的标签现在会很好地格式化为每个属性一行。

你可以在https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html属性&ssr=false#概述。我用它，它很方便！

Answer 4

对于那些使用Prettier的用户，您可以添加以下行：

"prettier.singleAttributePerLine": true,

阅读此处：https://prettier.io/docs/en/options.html#single-每行属性

Answer 5

将默认格式化程序更改为Vetur对我有效：

"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},