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