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

【问题标题】：How to enforce new line per attribute in vue using Prettier in VS Code?如何在 VS Code 中使用 Prettier 在 vue 中强制每个属性换行？
【发布时间】：2022-11-10 06:55:53
【问题描述】：

我目前在 VSCode 中为 Vue 使用 Prettier Version: 9.5.0。

这是我当前的代码

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

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

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

到目前为止，我已经尝试根据这些release notes 在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,

【问题讨论】：

标签： vue.js visual-studio-code eslint prettier

【解决方案1】：

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 找到它。我用过，非常好用！

【讨论】：

我真的不喜欢这需要另一个依赖项，Vue 3 应该让所有这些废话变得更容易。
从技术上讲，它不是依赖项，而是 VS Code 扩展。而且这也不是 Vue 3 的问题——许多其他框架将大量属性（props）打包到 html 标签中。 VS Code 应该有这个内置的快捷方式。此外，一些开发人员对 Prettier 固执己见的格式感到恼火，并使用 ESLint 代替代码格式（特别是 Prettier 处理长行/换行的方式——配置这种行为很困难/不可能）。见antfu.me/posts/why-not-prettier。
嗯，很公平，将查看文章。感谢您的跟进。
别客气。作为一名网络开发人员，肯定有很多痛点，但至少事情通常似乎在向前发展和改进:)。

【解决方案2】：

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

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

【讨论】：