我想，也许以后不用再烦恼Vue项目的代码格式化问题了

先介绍下背景：最近，准备开始搞新的项目，是基于Vue的后台管理系统。

然后，在开发的时候，发现我的Vue代码中的模板部分总是按照属性自动换行，试了网上很多方式都搞不定，而我又难以接受这种样式，因此决心非给他整明白不可。

这是让我恼火的样式

这是我最终的效果

从我接手这台电脑的时候，我的vscode编辑器是已经安装了eslint,prettier,vetur等一些“必备的”插件。而根据我对这些插件的一点点了解，我知道这三个插件都有格式化代码的作用，只是出于对这几个插件认知不够，先放着。

接着，根据网上的一些前辈经验，我了解到，vetur 有一些属性可以格式template模板代码，vetur.format.defaultFormatterOptions，vetur.format.defaultFormatter.html，但参考设置了之后，发现效果不对，怀疑是 prettier冲突导致，所以我选择禁用prettier后在测试。果然，禁用之后，虽然效果还是不对，但已经可以通过属性wrap_attributes控制了，查看wrap_attributes源码可以发现，有些值已经无效了。所以，万一你设置的值没有效果，也许是因为插件不在接受了。经过测试，这里我发下我的配置项setting.json

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 控制换行的方式，取可视区宽度和编辑器设置折行列中较小值
  "editor.wordWrap": "bounded",
  // 设置编辑器的换行最小列数
  "editor.wordWrapColumn": 120,
  // 默认的格式化程序
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },

结论：

• prettier插件已经不需要了，可以卸载了
• 设置好编辑器的换行方式和最小换行列数
• 设置vuter的格式化属性