Reference sources in particular, these content is not my original, but the network said a lot, and this I test effective, Thanks to Raymond at SegmentFault it has 3.6K likes. Thanks to Jack_Chen at SegmentFault it has 1.8K likes. Thanks to Jack_Chen at SegmentFault it has 346 likes

Recently when I wrote Vue code, I found that the HTML code in template would break lines because the attributes in the tag exceeded a little bit. It was very uncomfortable to watch, after all, the screen is quite spacious.

1. Get straight to the point

1. Modify “wrap_attributes”: “force-expand-multiline”

For “wrap_attributes” : “aligned – multiple”

2. Add “vetur. Format. DefaultFormatter. HTML” : “js – beautify – HTML,

2. Specific operation

First describe the situation of my VSCODE plug-in, a Vetur,vue-beautify

Open search vetur is set. The format. DefaultFormatterOptions >. Click on the Settings in the json editor



Take a look at my modified version above

3, the principle of

1. About vetur. Format. DefaultFormatter. HTML

This is because the built-in formatting plug-in was replaced in VSCode1.7.2. {"prettier. SingleQuote ": true, "prettier. Semi "in VScode setting (setting.json) false, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": {"wrap_attributes": "force-aligned"}} see vuejs/vetur#476 for detailsCopy the code

2. About vetur. Format. DefaultFormatterOptions

// Wrap attributes. // -auto: wrap attributes only if the line length is exceeded. // -force: newlines for every attribute except the first. // -force-aligned: Wrap every attribute except the first one and keep it aligned. // -force-expand-multiline: newlines for each attribute. // -aligned-multiple: aligns attributes vertically when the fold length is exceeded. "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto", } },Copy the code

4, if everyone has a better way to communicate ~ crab crab