解决在写Vue时，格式化代码 属性自动换行的问题

1、直入主题

1. 修改 “wrap_attributes”: “force-expand-multiline"为"wrap_attributes”: “aligned-multiple”
2. 添加 “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 // 对属性进行换行。 // - auto: 仅在超出行长度时才对属性进行换行。 // - force: 对除第一个属性外的其他每个属性进行换行。 // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。 // - force-expand-multiline: 对每个属性进行换行。 // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。

“vetur.format.defaultFormatterOptions”: { “js-beautify-html”: { “wrap_attributes”: “auto”, } }, 复制代码

4、如果大家有更好的方式可以留言交流~蟹蟹