vscode对代码格式化问题

在vscode中安装vetur插件包之后，每次是使用Format Document命令后，所有得属性都自动换行了

<el-table
      size="mini"
      :data="model.rows"
      height="220"
      style="width: 100%;">
      <el-table-column
        align="center"
        prop="appName"
        label="预约人"
        width="80">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="区县">
        <template slot-scope="scope">
          <span>{{scope.row.cityName}} {{scope.row.areaName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="orderDes"
        show-overflow-tooltip
        label="事项">
      </el-table-column>
      <el-table-column
        align="center"
        label="预约时间">
        <template slot-scope="scope">
          <span>{{ $formatDateTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

代码太长，不是我想要得

看一下下面这种格式化后

  <el-table size="mini" :data="model.rows" height="220" style="width: 100%;">
      <el-table-column align="center" prop="appName" label="预约人" width="80">
      </el-table-column>
      <el-table-column align="center" prop="address" label="区县">
        <template slot-scope="scope">
          <span>{{scope.row.cityName}} {{scope.row.areaName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="orderDes" show-overflow-tooltip label="事项">
      </el-table-column>
      <el-table-column align="center" label="预约时间">
        <template slot-scope="scope">
          <span>{{ $formatDateTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

这就舒服多了,在settings.json文件中添加一下内容即可

"vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typ=script",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "wrap_attributes_mode": "auto",
      "wrap-line-length": 100,
      "wrapped_attributes_per_line": "multiple",
      "wrapped_attributes_indent": "auto",
      "wrapped_attributes_end": "auto"
    }
  }

注意：主要关注"js-beautify-html"中得，其余有多余得配置暂时没有研究透彻

网上有人只配了"wrap_attributes": "auto",,这又个问题，就是如果属性过多，所有都回显示到一行，例如：

<el-pagination class="text-center" @current-change="val => this.model.pageLoad(val)" :current-page.sync="model.pageIndex" :page-size="model.pageSize" layout="total, prev, pager, next" :total="model.count" :pager-count="5"></el-pagination>

在过长时期望是要换行得而不是一行显示所有，例如：

  <el-pagination class="text-center" @current-change="val => this.model.pageLoad(val)"
    :current-page.sync="model.pageIndex" :page-size="model.pageSize" layout="total, prev, pager, next"
    :total="model.count" :pager-count="5">
   </el-pagination>

这个可以根据个人使用习惯和屏幕大小设置wrap-line-length的值