I correct the component vue.js code in vscode, while periodically pressing Alt + Shift + F to automatically format the entered code.

The formatting is constantly changing: the code is transferred to another line, although there is still a lot of visual space.

Example.

It was:

Before

It became (see the shifts of properties input'ov):

After

Can this somehow be customized? Which way to dig settings?

  • one
    It's easier to read, isn't it? - meine
  • @meine is a matter of tastes / habits / codestail, I don’t want to argue about it. - AK ♦
  • Yes, no one is going to plant a dispute, just asked :) - meine
  • Is the beautify extension for vsc the same situation? - meine
  • I only have Vetur from additional extensions and that's it. - AK ♦

1 answer 1

Vetur uses prettyhtml for formatting.

View this document.

prettyhtml

The default formatter for Vue templates. Other settings include:

"vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 100, // No line exceeds 100 characters "singleQuote": false // Prefer double quotes over single quotes } }

prettier options are read from local .prettierrc config.

You should change printWidth

First you need to make sure that the HTML Formatter for Vetur is pretty pretty: User Settings -> Extensions -> Vetur -> Format> Default Formatter: HTML

If so, try opening settings.json: Ctrl-Shift-P, Open Settings (JSON) and add settings here:

 "vetur.format.defaultFormatterOptions": { "prettyhtml": {"printWidth": 300} }

If there are already other settings, do not forget the comma on the second last line.

  • I understand correctly that .prettierrc needs to be created either in the project folder or in the root of the home directory? I have something that does not work there or there: with "printWidth": 300 and formats with a line "printWidth": 300 . - AK ♦
  • I also understand, but I don’t have prettyhtml installed, so I can’t test it for sure. I added the answer how to make the necessary editing in the settings for the user. - Sergey Nudnov pm
  • So it did not start through .prettierrc although I tried differently ... But the option via user settings immediately took off. Yes, this is exactly the setting I was looking for, thanks! So even at leisure I will try to finish the setting through the .prettierrc file in the project folder - and in general the solution is suitable. - AK ♦