vscode的vetur插件如何格式化html代码？

Question

我知道可以使用

{
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

来格式化html代码，但是通常情况下组件的指令、props、事件会有很多，如何让这个插件定义一些配置来达到属性换行书写，如下：

<i-control-layout 
      ref="controls" 
      :btnCol="3" 
      :toolbar="treeToolbar" 
      moreBtnType="default"
 ></i-control-layout>

Answer 1

vuejs的官方插件有个叫eslint-plugin-vue,搭配eslint使用
所以eslint配置文件(.eslintrc.js)如下：

module.exports = {
    //...
     extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended', // vue-template默认是essential 需要改成recommend
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  plugins: ['vue'],
    rules: {
         'vue/max-attributes-per-line': [
              2,
              {
                singleline: 3,
                multiline: {
                  max: 3,
                  allowFirstLine: false
                }
              }
          ]
    }
}