VsCode：Vue单文件格式化属性换行显示

需要安装插件vetur 文档：

• vetur： https://vuejs.github.io/vetur/guide/formatting.html
• js-beautify-html: https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
• prettier https://prettier.io/docs/en/options.html

settings.json

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
  // 保存时候自动格式化
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      //属性换行
      "wrap_attributes": "force",
      "indent_size": 2,
      "indent_char": " "
    },

    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    
    // css/scss/less/js/ts
    "prettier": {
      //设置分号
      "semi": true,
      //双引号变成单引号
      "singleQuote": true,
      //尾部逗号 es5|none|all
      "trailingComma": "es5",
    }
  }  
}

js-beautify-html 选项

end_with_newline: false, // End output with newline
indent_char: ' ', // Indentation character
indent_handlebars: false, // e.g. {{#foo}}, {{/foo}}
indent_inner_html: false, // Indent  and  sections
indent_scripts: 'keep', // [keep|separate|normal]
indent_size: 2, // Indentation size
indent_with_tabs: false,
max_preserve_newlines: 1, // Maximum number of line breaks to be preserved in one chunk (0 disables)
preserve_newlines: true, // Whether existing line breaks before elements should be preserved
unformatted: [], // Tags that shouldn't be formatted. Causes mis-alignment
wrap_line_length: 0, // Lines should wrap at next opportunity after this number of characters (0 disables)
wrap_attributes: 'force-expand-multiline' as any
// Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]