欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VSCode中Vue代码格式化

程序员文章站 2022-07-05 19:06:23
...

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

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

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

VSCode中Vue代码格式化

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

VSCode中Vue代码格式化

搜索的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>