VSCode中Vue代码格式化

我们在编辑代码的时候,经常会使用代码格式化的操作,来使我们的代码更加的美观,容易阅读,还能使心情舒畅.可最近在使用vscode格式化vue代码的时候,没有实现预期的效果.如下代码格式:

<div class="td">
  <input
    type="text"
    class="form-control"
    placeholder="请输入用户名"
  >
</div>

这是格式化后大代码,input元素内每个属性都换行了,我不喜欢这种代码格式,代码看起来很乱,我预期的效果是input的所有属性都显示到一行,如果当前行的空间能够放的开的话.所以我想修改一下编辑器格式化vue文件的方式.如下步骤,依次打开code-首选项-设置,

 在打开的设置页面搜索区域搜索vetur.format.defaultFormatter.html,结果如下:

搜索的vetur.format.defaultFormatter.html配置项有none、prettyhtml、js-beautify-html、prettier4个选项,我们可以选择none和prettyhtml可以实现前面我预期的将input所有属性展示到一行的效果,选择js-beautify-html和prettier两个属性会将各属性分开显示到不同的行展示.这里我选择了prettyhtml,实现了我的预期效果,如下:

<div class="td">
  <input type="text" class="form-control" placeholder="请输入用户名">
</div>