需要安装插件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 <head> and <body> 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"]
