vscode每次格式化代码当前,html标签会依据属性主动换行,就是上面的样子:

<input v-model="bankNumber"    class="bank-formItem-input"    placeholder="仅反对借记卡绑定"    @blur="handleBlur"    type="number"/>

可能有人会看的难受,然而我看的切实好受。有跟我一样的童鞋能够试试以下设置:

将"js-beautify-html"下的"wrap_attributes"设置为"auto"。

以下为vscode中settings.json文件设置:

"vetur.format.defaultFormatterOptions": {  "js-beautify-html": {    "wrap_attributes": "auto",  }}

关上vscode设置,看下图,应该很分明了。

最初对于"js-beautify-html"下的"wrap_attributes"的几个选项阐明:

  • auto:仅在超出行长度时才对属性进行换行。
  • force:对除第一个属性外的其余每个属性进行换行。
  • force-aligned:对除第一个属性外的其余每个属性进行换行,并放弃对齐。
  • force-expand-multiline:对每个属性进行换行。
  • aligned-multiple:当超出折行长度时,将属性进行垂直对齐。