vue.js 如何在VS代码中使用Prettier强制每个属性换行？

iaqfqrcu 于 2023-02-09 发布在 Vue.js

关注(0)|答案(3)|浏览(1241)

我目前在VSCode中使用Prettier Version: 9.5.0作为Vue。
这是我当前的代码

<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

来源：https://stackoverflow.com/questions/73100289/how-to-enforce-new-line-per-attribute-in-vue-using-prettier-in-vs-code

3条答案

按热度按时间

ngynwnxp1#

Danny Connell（YT，Udemy的Vue教育者）也有同样的问题，他写了一个VS代码扩展名为“Split HTML Attributes”，它将一个包含多个属性的起始标签格式化为每行一个属性。选择整个起始标签（包含属性），然后按ctrl+shift+alt+A，你的标签现在将被很好地格式化为每行一个属性。
你可以在www.example.com上找到它https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes&ssr=false#overview。我用它，它很方便！

赞(0）回复(0）举报 2023-02-09

yvt65v4c2#

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

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

赞(0）回复(0）举报 2023-02-09

rfbsl7qr3#

我也遇到了同样的问题，但最终我发现当我安装Volar时（我猜），它一定是把这个添加到了我的settings.json中。它似乎覆盖了其他编辑器。defaultFormatter。

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

我把它改成了：

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

Prettier现在按预期工作。

赞(0）回复(0）举报 2023-02-09

我来回答

vue.js 如何在VS代码中使用Prettier强制每个属性换行？

3条答案

相关问题

热门标签

最新问答