解决在写Vue时，格式化代码 属性自动换行的问题

1、直入主题

a. 修改："wrap_attributes": "force-expand-multiline"

为："wrap_attributes": "aligned-multiple"

b. 添加 "vetur.format.defaultFormatter.html": "js-beautify-html"

2、操作

安装 vsCode 插件：Vetur, vue-beautify
打开设置 搜索 vetur.format.defaultFormatterOptions > 点击在 settings.json 中编辑

下图是我修改后的：

3、原理

1.关于vetur.format.defaultFormatter.html

// 这是因为在VSCode1.7.2中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中，配置如下规则
{
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
    }
}
// 详情见 vuejs/vetur#476

2. 关于vetur.format.defaultFormatterOptions

// 对属性进行换行 wrap_attributes
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。

// prettyhtml(doc: string, options?): vFile
// - tabWidth: 缩进级别的空间宽度（默认值：2）
// - useTabs: 使用制表符代替空格进行缩进（默认值：false）
// - printWidth: 使用不同的最大行长度（默认值：80）
// - usePrettier: 对嵌入内容使用更漂亮（默认值：true）
// - prettier: 为嵌入的内容使用自定义更漂亮的设置（默认：本地配置）
// - singleQuote: 使用单引号代替双引号（默认值：false）
// - wrapAttributes: 强制包装属性（当它有多个时，默认：false）
// - sortAttributes: 按字母顺序对属性进行排序（默认值：false）

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}