How to reformat a Vue.js component in vscode?

vue.js visual-studio-code vue-component code-formatting vetur
WoJ picture WoJ · May 16, 2018 · Viewed 10.7k times · Source

I use 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 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 to actually beautify (reformat) the code for a Vue component?

Answer

BobHy picture BobHy · May 19, 2018

I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:

Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)

Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.

Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.

But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.

Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.

Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.

So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.

Related questions

Why Prettier does not format code in VSCODE?

In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code editor. When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted …

Read More
How disable eslint warning for a specific line in a template in a .vue file in VS Code

I would like to dismiss this error on my vue file I am trying to add this processor line <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for --> and <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if --> but neither Nor dismiss the eslint …

Read More
Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly. For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it …

Read More