Vetur: Formatting of .vue files?

[truongio]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: macOS High Sierra
• Vetur version: 0.11.3
• VS Code version: 1.18.0

Problem

The editor says: "Sorry, but there is no formatter for 'vue'-files installed." when I press format document keybind.

Did I miss something or does Vetur with Prettier not support .vue files anymore for formatting?

[octref]

Did you install other vue extensions? Do you have file.associations?

[preinoch]

I have this problem too in same vetur/vscode version, but my system is Windows10, vscode prompt "The Vue Language Server server crashed 5 times in the last 3 minutes. The server will not be restarted.".
I have reinstalled vetur solve this problems.

[truongio]

@octref I had Vue Snippets but I tried uninstalling it and it still doesn't work. I have no files.associations in my settings, just the default

[truongio]

It solved itself by resintalling Vetur for some reason.

[Atuna]

As shown in the screenshoot below, I have the same problem. I have Vetur and Vim plugin installed, and file.associations that link *.wpy files to vue formate. When I press "==" to formate one line in a wpy file, a hint will shown up said: "Sorry, but there is no formatter for 'vue'-files installed."

[octref]

@Atuna We do not have line-based formatter. You can only format whole document.
Other than that, wpy is not supported by Vetur.

[eric-burel]

Hi, this should not be closed, it did not solve after a reinstall of vetur. This issue is related to the 1.18 version of VSCode.

[chrisnicola]

Running into this issue as well. I'm guessing this has to do with the change to Prettier. Does it need to be installed via NPM. I added the VSCode extensions now.

[chrisnicola]

@octref you say you never had line or selection based formatting, but I don't recall seeing this error before now.

[octref]

@Atuna is the only person giving me a screenshot, and the problem is Vetur registers a formatter for *.vue files, not *.wpy files.

If you report issue without describing the issues, like which file you are trying to format, what extensions you have, etc, I can't do anything right?

[eric-burel]

Hi @octref, this is not the lack of good will, it is that there are actually not much to say, this bug appear as soon as we try to format any .vue file. Here are my settings:

// Placez vos paramètres dans ce fichier pour remplacer les paramètres par défaut
{
    "eslint.autoFixOnSave": true,
    "eslint.trace.server": "verbose",
    "editor.fontSize": 18,
    "window.zoomLevel": 1,
    "vim.disableAnnoyingNeovimMessage": true,
    "git.confirmSync": false,
    //"emmet.triggerExpansionOnTab":true,
    "emmet.includeLanguages": {
        "javascript": "html",
        "vue": "html",
        "vue-html": "html",
        "javascriptreact":"html",
        "typescript":"html"
    },
    "editor.multiCursorModifier": "ctrlCmd",
    "workbench.iconTheme": "ayu",
    "vetur.format.html.wrap_attributes":"force-expand-multiline"
}

So there are no file associations. The bug appeared as soon as I updated to VSCode 1.18. I'll try to check if there is a bad interaction with another lib, but I think it is a config or lower level issue.

[guyulmaz]

I have 1.19.0-insider with the latest build, and the problem still exists.

[octref]

What's the output in Output (In the bottom panel, next to terminal) -> v-language-sever?

[eric-burel]

@octref It shows Vue. Could it be related to prettier, which seems to be the default formatter for js ?

[octref]

I mean this.

[eric-burel]

Oh yeah sorry, it shows vetur initialized as expected. Note that everything else seems to works well, it is only formatting.

[octref]

I'm tracking this in #592.

[liuguangyong93]

I met this situation too!

[liuguangyong93]

I have 1.19.1-insider with the latest build, and the problem still exists.I reinstalled,but it doesnot working now.

[liuguangyong93]

@octref 、@eric-burel,please help me!

[eric-burel]

Hi @Gavin110 sadly I'll be of no help there :) See #592 where the issue is tracked.

[liuguangyong93]

@eric-burel Thanks!

[mholtzhausen]

Add this to your settings:
"vetur.format.defaultFormatter.html": "js-beautify-html"

[rajeshwarpatlolla]

I have the below json in my settings. But still it is not formatting <template> code in .vue file.

{ "prettier.singleQuote": true, "prettier.trailingComma": "all", "prettier.printWidth": 300, "editor.tabSize": 2, "prettier.eslintIntegration": true, "vetur.format.defaultFormatter.html": "js-beautify-html" }

[pjconnect]

also, I had to remove "Beautify" extension. now it's formatting all including HTML.

[rajeshwarpatlolla]

.ts files are not formatting if i remove buetify

[sandro-git]

Hello, i try the last solution and it works well but it conflicts with Eslint plugin:vue/recommended. How can we setup js-beautify-html to apply formats like : html.format.wrapAttributes : force-expand-multiline

[aphofstede]

js-beautify-html is deprecated and turned off by default: https://vuejs.github.io/vetur/formatting.html

[sandro-git]

Are you preview to give us an alternative?

It would be great to have a styler that follows the recommended rules of vuejs.

Sandro Das Neves

Le 13 avr. 2018 à 15:11, Alexander Hofstede [e-mail] a écrit :

js-beautify-html is deprecated and turned off by default: https://vuejs.github.io/vetur/formatting.html

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[aphofstede]

I'm not a maintainer, but @octref mentioned at the bottom of that page:

I plan to contribute to reshape formatter and drop js-beautify eventually.

[sandro-git]

OK thanks you for this information. I’m not a JavaScript ninja but I’m really interested in help in any form this project if you need it let me know.

Regards,

Das Neves Sandro

Le 13 avr. 2018 à 16:40, Alexander Hofstede [e-mail] a écrit :

I'm not a maintainer, but @octref https://github.com/octref mentioned at the bottom of that page:

I plan to contribute to reshape https://github.com/reshape/reshape formatter and drop js-beautify eventually.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/vuejs/vetur/issues/543#issuecomment-381156823, or mute the thread https://github.com/notifications/unsubscribe-auth/AQW4FhSIvAbk9pcdM92ezeKR5lFqA2Uaks5toLjkgaJpZM4QdRir.

[sandro-git]

Hello again,

i’ve just tried this vscode setting : wrapAttributes": "force-expand-multiline »

It would be great it works inside template.

Le 13 avr. 2018 à 16:40, Alexander Hofstede [e-mail] a écrit :

I'm not a maintainer, but @octref https://github.com/octref mentioned at the bottom of that page:

I plan to contribute to reshape https://github.com/reshape/reshape formatter and drop js-beautify eventually.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/vuejs/vetur/issues/543#issuecomment-381156823, or mute the thread https://github.com/notifications/unsubscribe-auth/AQW4FhSIvAbk9pcdM92ezeKR5lFqA2Uaks5toLjkgaJpZM4QdRir.

[CKGrafico]

By the moment js-beautify-html is working well for me when I turned it on

[sandro-git]

@CKGrafico can you detail us what are your settings ?

[CKGrafico]

{
    "window.zoomLevel": 0,
    "editor.fontSize": 14,
    "editor.renderWhitespace": "boundary",
    "workbench.iconTheme": "simple-icons",
    "editor.minimap.enabled": true,
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "tslint.autoFixOnSave": true,
    "tslint.typeCheck": false,
    "eslint.autoFixOnSave": true,
    "extensions.ignoreRecommendations": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}

[sandro-git]

@CKGrafico where do you change the settings for js-beautify-html ?

[CKGrafico]

Not sure about your question xD
I've changed on the last line of mi VSCode preferences

[sandro-git]

yeah I see you set js-beautify-html to format html but how you change let say an indention of 4 instead of 2 in your templates ?

[CKGrafico]

At the bottom right bar I've chosen Spaces and 4

[sandro-git]

ok. I try this out. that format all the document what I'm trying to do is to format only html. and have another configuration for js.

[octref]

I added a notice on top of https://vuejs.github.io/vetur/formatting.html.

[gayanSandamal]

Mine is fixed.

1. Install Prettier extension.
   URL - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2. Go to File > Preferences > Settings
3. Add below,
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "prettier.eslintIntegration": true
4. Save.
5. Try Alt + Shift + F

[slinker-hiwa]

My setting. working for my.

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "vue",
        "javascriptreact": "jsx",
        "javascript": "js",
        "typescript": "jsx",
        "typescriptreact": "tsx"
    },

[mariusa]

@octref Could you please reopen this issue and leave open until there is an official default solution listed at
https://vuejs.github.io/vetur/formatting.html
?
Formatting .vue files doesn't work now with prettier.

[octref]

Yes, there are other issues for prettier. Please find the right one to follow up: https://github.com/vuejs/vetur/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+prettier

[ashrafhadden]

Solutions

*Update!

PrettyHTML now supported, see last solution 3 below

1. ESlint autoFixOnSave (Official)

Just do command-save to format.

Prerequisites

• ESLint Extension

// settings.json

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "html",
    "css",
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true },
    { "language": "vue-html", "autoFix": true }
  ],

```jsonc
// package.json

"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": "plugin:vue/recommended",
"parserOptions": {
"parser": "babel-eslint"
}
},

#### _Options_
> plugin:vue/base - Settings and rules to enable correct ESLint parsing
> plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
> plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
> plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency
> https://github.com/vuejs/eslint-plugin-vue#gear-configs

## 2.  JS-Beautify `js-beautify-html` (Deprecated)
This is just using VSCode's built-in html formatter which is based on [js-beautify](https://github.com/beautify-web/js-beautify)
> Alternative html formatter. Deprecated, turned off by default and will be removed soon. js-beautify is not actively maintained and has many long-standing bugs. Use at your own risk.
> https://vuejs.github.io/vetur/formatting.html#js-beautify-html-deprecated
### Prerequisites
- [Vetur Extension](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
```jsonc
// settings.json

"vetur.format.defaultFormatter.html": "js-beautify-html",

3. prettyHTML

Haven't tried but it looks promising. Created last June and the lone contributor is very active.
https://github.com/Prettyhtml/prettyhtml

Prerequisites

• Vetur Extension

// settings.json

"vetur.format.defaultFormatter.html": "prettyhtml",

Future Alternatives

• Reshape https://vuejs.github.io/vetur/formatting.html#plan
• Prettier https://github.com/prettier/prettier/issues/2097 & #491

[octref]

Re prettyHTML, see https://github.com/vuejs/vetur/issues/491#issuecomment-414072754, I'm looking into it, so far looks promising.

[oller]

I mean this.

what theme is this @octref looks pretty!

Ahh, I see it's Nord.

[sandro-git]

@octref it looks great but difficult to figure out how to install in vscode today.

I don’t have the skills unfortunately but a extension would be great.

[octref]

It is bundled. Just enable it with "vetur.format.defaultFormatter.html": "prettyhtml"

[octref]

Docs here: https://vuejs.github.io/vetur/formatting.html#formatters

[sandro-git]

@octref i just try it like that and it doesn't work. my settings :

the template tag still with 2 spaces after saving should i format the document manually ?

[oller]

From what I've gleamed it seems prettyhtml preserves spacing contextual to
the file. If you flatten all indentation, it'll space back out to 2 but if
it was initially spaces at 4 it'll respect that

On Thu, 18 Oct 2018, 20:21 Sandro Das Neves, [e-mail]
wrote:

@octref https://github.com/octref i just try it like that and it
doesn't work. my settings :
[image: capture d ecran 2018-10-18 a 21 15 35]
https://user-images.githubusercontent.com/17152022/47178276-036f3e80-d31b-11e8-8d3e-1d36fdd8bd96.png
the template tag still with 2 spaces after saving should i format the
document manually ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vetur/issues/543#issuecomment-431129186, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABKc97fZ7TFW6qGNwdw9_lzi4fnuCmFTks5umNS3gaJpZM4QdRir
.

[octref]

@sandro-git @oller This is VS Code's feature called editor.detectIndentation. You can turn that off by "editor.detectIndentation": false. I'll try to add a warning for this confusing behavior.

[sandro-git]

@octref sorry to boring you with that small problem but it still doesn't indent 4 spaces instead 2.

[phillip-haydon]

Yup, I have the same issue. HTML formatted with 4 spaces, style/script with 2 spaces. All other JS files are 4 spaces.

[diazgilberto]

Same here, html 2 spaces instead of 4 spaces, and js code is 2 spaces indentation.

[octref]

If you have a prettierrc locally, or have prttier.* configs in VS Code, change tabWidth to 4.

When they are present, they override the tabSize in VS Code.

The original issue happens when you have not initialized Vetur correctly. If you still experience it, open new issues with repro steps.

[phillip-haydon]

That makes no sense. This can be reproduced by having a clean install of vscode. Configure vscode to be tabsize 4. Turn off detect by file. Then install vetur. And it sets the tabsize 2. It ignores vscode. If installing vetur code says I did not initialize it correctly then vetur is buggy.

(This is how my local is setup)

[octref]

I see your problem. I think going forward, having two options, vetur.format.options.tabSize and vetur.format.options.useTabs that's NOT affected by indentation detection would make it easier to understand. Currently if you do set prettier.tabWidth to 4, I think Vetur formats the js section with 4 spaces.

Maybe I should also avoid reading configs from prettier.* and just read from local .prettierrc files. This has always been a source of confusion...

[sandro-git]

@octref what do you mean by initialized vetur correctly. I just install it, change some option and use it.

[octref]

@sandro-git So you are still experiencing the original problem?

Try to either reinstall Vetur or remove other Vue extensions that would conflict with Vetur.

[abdusamadtv]

@octref i just try it like that and it doesn't work. my settings :

the template tag still with 2 spaces after saving should i format the document manually ?

you can check this