需要安装插件vetur
文档：
- vetur：https://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fvuejs.github.io%2Fvetur%2Fguide%2Fformatting.html
- js-beautify-html:https://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvetur%2Fblob%2Fmaster%2Fserver%2Fsrc%2Fmodes%2Ftemplate%2Fservices%2FhtmlFormat.ts
- prettierhttps://www.ctyun.cn/portal/link.html?target=https%3A%2F%2Fprettier.io%2Fdocs%2Fen%2Foptions.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"]