如何在 VS Code 中使用 Prettier 在 vue 中强制每个属性换行？

Question

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

这是我当前的代码

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

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

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

到目前为止，我已尝试根据这些发行说明singleAttributePerLine在 VSCode 中使用我的文件中的选项。但是它不起作用，VSCode 无法识别此配置。我也无法在 Prettier 扩展的设置菜单中找到此设置。我也尝试将此选项放入文件中但没有结果settings.json.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”但不想使用“prettier”或其他扩展的人，可以通过将其添加到“settings.json”来实现此目的：

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

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

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

正如这个答案所解释的：https ://stackoverflow.com/a/52669475/812919

Answer 2

我遇到了同样的问题，但最终我发现当我安装 Volar 时（我猜）它一定已将其添加到我的 settings.json 中。它似乎覆盖了其他 editor.defaultFormatter。

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

我把它改为：

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

Prettier 现在可以按预期工作。

Answer 3

Danny Connell（YT、Udemy 上的 Vue 教育者）也遇到了同样的问题，并编写了一个名为“Split HTML Attributes”的 VS Code 扩展，它将具有多个属性的起始标记格式化为每行一个属性。选择整个起始标记（内部包含属性），然后按 ctrl+shift+alt+A，您的标记现在将被很好地格式化，每个属性一行。

您可以在https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes&ssr=false#overview找到它。我正在用，非常好用！