解決在寫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
    }
}