I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available. The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.