Prevent VSCode Turn Vuejs code to vertically when onsave

Question

My VSCode onSave

... turns my Vuejs codes vertically somehow to so many lines. I know that it is easier to read, but I also find it very long to read, and it makes my file too long and I had to scroll down for no reason.

Is this sth that caused by Prettier?

Can someone pls show me how to prevent it from happening?

settings.json

"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,  
},

Answer 1

Prettier formats lines to fit within the character limit of printWidth (default is 80 characters).

Set printWidth to a high value to avoid this line wrapping:

// .prettierrc
{
  "printWidth": 300
}