First introduce the background: recently, I prepared to start a new project, which is based on Vue background management system.

Then, when I was developing, I found that the template part of my Vue code was always wrapped according to the attribute. I tried many ways on the Internet to do it, and I could not accept this style, so I decided to make it clear to him.

This is the pattern that annoys me

This is my final effect

From the time I took over this computer, my vscode editor had installed eslint,prettier,vetur, and other “must-have” plugins. According to my little understanding of these plug-ins, I know that these three plug-ins all have the function of formatting code, just out of the lack of awareness of these plug-ins, leave it for now.

Then, according to online some predecessors experience, I learned that some vetur properties can format template template code, vetur. Format. DefaultFormatterOptions, vetur. Format. DefaultFormatter. HTML, But after setting the reference, I found the effect was wrong, and I suspected that prettier conflict was the cause, so I chose to disable Prettier before the test. Sure enough, when disabled, the wrap_attributes attribute still works, but it can now be controlled by the wrap_Attributes attribute. So, in case the value you set doesn’t work, it may be because the plugin no longer accepts it. After testing, HERE I post my configuration item setting.json

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"}},"vetur.format.defaultFormatter.html": "js-beautify-html"."vetur.format.defaultFormatter.js": "vscode-typescript".// Control how to wrap lines, take the viewable width and editor to set the smaller value in the fold line
  "editor.wordWrap": "bounded".// Sets the minimum number of newlines for the editor
  "editor.wordWrapColumn": 120.// The default formatter
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
Copy the code

Conclusion:

  • prettierThe plugin is no longer needed and can be uninstalled
  • Set the editor’s newline and minimum number of line changes
  • Set up thevuterFormatting property of