Vetur: "No formatter for 'vue'-files installed"

[wahidrahim]

Info

• Platform: Linux Mint
• Vetur version: 0.11.5
• VS Code version: 1.19.0

Problem

I can't format .vue files, it keeps saying there is no formatter for 'vue'-files installed:

I've installed prettier extension and added .prettierrc, what am I missing?

[octref]

This has been reported before (#543 ) but I haven't been able to track it down.

Can you first try to run it with https://github.com/octref/veturpack and see if it still happens?

Also, can you provide a list of all extensions you have?
You can run this in CLI code --list-extensions.

[wahidrahim]

I tried testing out veturpack, it didn't pass the trials in the readme:

• emmet doesn't work
• lodash auto completion doesn't work
• linting works, but because I have this in my settings

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

• formatting still doesn't work, same error saying no formatter

The extensions I have installed:

Shan.code-settings-sync
bung87.rails
christian-kohler.path-intellisense
dbaeumer.vscode-eslint
donjayamanne.githistory
eamodio.gitlens
eg2.tslint
esbenp.prettier-vscode
felipecaputo.git-project-manager
formulahendry.auto-rename-tag
leizongmin.node-module-intellisense
monokai.theme-monokai-pro-vscode
mrmlnc.vscode-scss
naumovs.color-highlight
octref.vetur
rebornix.Ruby
robertohuertasm.vscode-icons
vscodevim.vim
wayou.vscode-todo-highlight

[octref]

I still can't reproduce it...If you do Help -> Toggle Developer Tools in VS Code, does it show any interesting errors?

[octref]

linting works, but because I have this in my settings

That's because you do need this config for it to work. https://vuejs.github.io/vetur/linting-error.html

emmet doesn't work
lodash auto completion doesn't work

That's probably because Vue Language Server isn't started properly.

[wahidrahim]

I reinstalled vscode and added just vetur plugin, it worked after that. I suppose it was conflicting with some other package? The issues I mentioned are resolved after the new install - although the .eslintrc.js file is not being used for the javascript formatting (standard); I have "prettier.eslintIntegration": true set in the user settings.

[octref]

You need to use eslint-plugin-vue, not eslint-plugin-html, which does not work with prettier-eslint.

Look at the setup in Veturpack: https://github.com/octref/veturpack

[eric-burel]

Hi @octref, so removing eslint-plugin-html should solve this (will try asap) ? Note that this plugin is installed by default (along with eslint-plugin-vue) in the default Vue webpack template, so it may be a bit annoying.

[octref]

@eric-burel Yes, you should use the vue plugin which is official. The webpack template has been outdated. They are working on a major bump for vue-cli 3.0, so they might be rewriting a lot of the templates.

[vsambor]

I have a different and similar problem:

I'm on mac OS Sierra
I had installed only vetur and eslint extension.
On formatting .vue files it formatted well the html and js and fix linting problems on the fly.
The problem was it didn't work for js files at all.
So I installed another extension prettier code formatter which fix this problem for js files, but it conflicts with vetur(I guess), now the .vue didn't work at all. So I decided to remove the prettier extension, and after this I restarted visual studio code and none of the files works any more :( with only vetur installed.

This is my VSC settings:

{
  //"editor.renderWhitespace": "all",
  "editor.mouseWheelZoom": true,
  "editor.tabSize": 2,
  "editor.renderIndentGuides": true,
  "editor.rulers": [
    160
  ],
  "window.zoomLevel": 0,
  "editor.wordWrapColumn": 160,
  "editor.wordWrap": "wordWrapColumn",
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "vetur.format.defaultFormatter": {
    "html": "prettier"
  },
  "prettier.eslintIntegration": true,
  "html.format.wrapLineLength": 160,
  "html.format.preserveNewLines": false,
  "workbench.iconTheme": "vscode-icons",
  "extensions.autoUpdate": true
}

Installed extensions list:

PeterJausovec.vscode-docker
dbaeumer.vscode-eslint
octref.vetur
robertohuertasm.vscode-icons

Should I clear something somehow?
I hope I shouldn't reinstall VSC for this!?'
Anyways, the problem is why the .js files do not auto fix as vue files with vetur installed, when formatting?

[bbugh]

I am having this problem that VSCode won't format. I get this error in the developer tools when the window loads:

  ERR Language client is not ready yet: Error: Language client is not ready yet
    at LanguageClient.sendRequest (/Users/bbugh/.vscode/extensions/octref.vetur-0.11.5/client/node_modules/vscode-languageclient/lib/client.js:1473:19)

[eric-burel]

Hi @octref, it does not seem related to switching to eslint-plugin-vue, I deleted eslint-plugin-html but the issue is still there.

[jsfeldman]

I spent a lot of time trying to get this to work for my project and I thought I'd share what I found out. I'm not sure if all these steps are necessary, but this is what I ended up with through trial and error.

My initial eslintrc.js file was this:

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: [
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'import'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    'one-var': 0,
    'import/first': 0,
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
  }
}

First thing I had to do was move my .eslintrc file from a sub-directory to my root directory. I couldn't find a way to specify the location of the eslintrc file and it didn't seem to work with it in the sub-directory.

Then I had to switch to using the vue plugin and add "plugin:vue/recommended" to extends like @octref recommended.

Once I did that I had to fix the issue with parser: 'babel-eslint'. However, I found changing their parse options to what was recommended didn't work either (possibly because my node-modules folder with babel-eslint was still in the sub-directory) so I removed it altogether.

I had similar issues with the standard module so I removed that as well and just pasted the rules for it below (found here)

Here is the final configuration of my file that I put in the root folder of the project:

module.exports = {
  root: true,
  env: {
    browser: true
  },
  extends: ["plugin:vue/recommended"],
  // required to lint *.vue files
  plugins: ["vue"],
  // add your custom rules here
  rules: {
   ... standard linting rules
  }
}

I'm hoping someone can help me figure out how to get the modules/importing working and how to get it working with the file in the subdirectory.

Also, one other caveat, the formatting breaks with any file that has async/await in it (this might be because I'm not using the babel-eslint module anymore). There might be issues with other es6 syntax I'm not aware of too.

Edit:
After reading this, async/await works by adding "parserOptions": { "ecmaVersion": 8 }

[ffxsam]

This is due to some update in one of the related extensions. It was working fine for me at some point (last December?) and now it's not. Seems to be related to prettier+eslint, because prettier+tslint works great.

[stepli1010]

where is the correct answer, annoyed~

[husayt]

Adding this to vscode settings has fixed it for me:

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

[ffxsam]

I think we're talking about Prettier formatting JS code within <script> blocks, not formatting the template.

[vsambor]

I have this setitngs now and it works well:

User settings:

{
  "editor.mouseWheelZoom": true,
  "editor.tabSize": 2,
  "editor.renderIndentGuides": true,
  "editor.rulers": [
    160
  ],
  "window.zoomLevel": 0,
  "editor.wordWrapColumn": 160,
  "editor.wordWrap": "wordWrapColumn",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "vetur.format.defaultFormatter.html": "prettier",
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "html.format.wrapLineLength": 160,
  "html.format.preserveNewLines": false,
  "workbench.iconTheme": "vscode-icons",
  "extensions.autoUpdate": true
}

Extensions:

dbaeumer.vscode-eslint octref.vetur robertohuertasm.vscode-icons

[ffxsam]

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

That's an invalid setting. It can either be "none" or "js-beautify-html"

[ffxsam]

There must've been an update. Suddenly today, Vetur is able to use prettier to clean up my script blocks!

[eric-burel]

@ffxsam Did you update VSCode ? Because this all started with a VSCode update. I still can reproduce and that in both a Vue and a Nuxt project.

[ffxsam]

@eric-burel That's possible.. I don't remember. I just sorta update when it prompts me and go on with my day. 😄 I'm on 1.19.3.

[ffxsam]

After an OS reinstall, I'm now getting "Sorry, but there is no formatter for 'vue'-files installed." And on top of that, the 'scaffold' snippet is missing.

EDIT: Uninstalled Vetur, quit VS Code, ran Code, installed Vetur, quit, re-opened. Works now. I think Vetur didn't like being auto installed by the Sync Settings extension.

[kaluznyt]

After an OS reinstall, I'm now getting "Sorry, but there is no formatter for 'vue'-files installed." And on top of that, the 'scaffold' snippet is missing.

EDIT: Uninstalled Vetur, quit VS Code, ran Code, installed Vetur, quit, re-opened. Works now. I think Vetur didn't like being auto installed by the Sync Settings extension.

Had exactly same issue (OS reinstall w10), as well used Sync Settings for vscode, but then re-install of vetur helped to solve it.

[octref]

@ffxsam @kaluznyt Sorry, what is OS reinstall? I guess you do not mean reinstalling your operating system, right?

Was it a VS Code update? And if so did you upgrade from a 32-bit version to 64-bit version?

[kaluznyt]

no, I just reinstalled OS (yep, that means reinstallation of operating system, windows 10 in my case), then installed vscode and then did a sync of extensions using a "Sync Settings" extensions, and having installed vetur and js-beautify this way I was facing this issue of "Sorry, but there is no formatter for 'vue'-files installed."

But then, after I uninstalled vetur and then restarted vscode and installed vetur (as suggested here) everything worked again, so it's like the Sync Settings extension doesn't install vetur properly or something (like colleague suggested)

I'm on 64bit version of vscode

[octref]

For the others, are you using https://github.com/shanalikhan/code-settings-sync?

[kaluznyt]

yes

[jacebot]

MacOS High Sierra, VSCode, not able to select prettier as an option for HTML, available for all other parts. Latest and greatest in terms of versions. Brand new MBP. Brand new install and updates.

[eric-burel]

Hi @octref, this is not related to code-settings, however I tried to repro on Code 1.2.1 insider build: it did not work using the Vim shortcut (select all text and then press =), but it did using the "Format document" manually.
My guess is that 2 different functions are called depending on the usage since Code 1.9.0 (the bug appeared suddenly).
Are other people encountering this issue Vim keybindings users ?

Edit: also could you please reopen the issue, as this is not resolved yet?

[octref]

This is an issue for VSCodeVim not Vetur. AFAIK you can bind = to use editor.action.formatDocument. https://github.com/VSCodeVim/Vim#quick-example-settings

[stepli1010]

@kaluznyt use your method, but the problem is still ...

[kaluznyt]

@stepli1010

Do you have Beautify installed ?

If yes, do you have this in your settings ?
"vetur.format.defaultFormatter.html": "js-beautify-html"

if yes, I don't have any other idea why this is not working for you sorry.

[goors]

I have same issue There is no formatter for 'vue'-files installed. on cmd+k+cmd+f. I have only Vetur installed from extensions. Any idea?

[octref]

@goors That runs the selection formatter, whereas Vetur only has a whole document formatter.
Try Format Document, not Format Selection:

[octref]

I opened https://github.com/Microsoft/vscode/issues/45605

[evenfrost]

@octref any chance Format Selection will be supported by Vetur as well?

[octref]

@evenfrost It'll never be supported. Just imagine you select some random html and css from a vue file and expect it to be formatted. What's the correct format? What's the correct indentation? What if you have regions spanning through <template> to <style>? it'll be more broken than being useful.

[evenfrost]

@octref I don't really know VS Code API that much but I see that Format Selection seems to work pretty well with different scopes in selection (e.g. HTML and JS):

Again, I have little to no experience with writing plugins for VS Code, and you do undoubtedly know better, I just thought it could be handy addition as there are situations where we need to format only single selection and full document format is undesirable (may break other things).

[octref]

It's possible to add commands to format single sections in vue file, but allowing generic range formatting for any range will have too many edge cases that we can't handle.

[evenfrost]

Got it, thanks for getting in touch and all the hard work on Vetur.

[edencorbin]

@octref Thank you, had this issue too and for me it was definitely that format selection ctr k ctr f does NOT work, format document works fine... nice work. In my case, I was able to uninstall beautify, uninstall Eslint (the plugin, I might have it global....), still works great.

[asmi77]

Same here, I use to launch the Format Selection ((ctrl+K)+(ctrl+F)) instead of Format Document with ctrl+shitf+I.
It could be useful to add a word on that in the doc.
Thanks for your help @octref .

[octref]

Doc has been updated.

[asmi77]

Great, thank you @octref .
I spent the whole day to finally find out that I was using the bad command.
Your updating will definitely be useful :D

[artus]

So what's the method to fix this atm? Link to the docs?

[octref]

Summary:

• Vetur only has whole doc formatter. You can't select a region to format.
• If your installation of Vetur is corrupted, run Developer: Reinstall Extension for Vetur

[nmrony]

These Vetur settings fixes my issue

  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",

[isaumya]

I have been using the js-beautify-html option to this day. But today morning i saw it's not working properly. instead of formatting HTML it's breaking the formatting. Anyone else who can confirm this behaviour? Temporarily disabled that settings.

[octref]

https://vuejs.github.io/vetur/formatting.html#js-beautify-html-deprecated

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.

prettyhtml -> https://github.com/vuejs/vetur/pull/912

[isaumya]

Can you please explain how can I use prettyhtml? Please provide the steps I'm sure it'll help others too

[octref]

The PR is not merged yet.

[isaumya]

Ok. When it is merged, please do let us know how to use it here. BTW any ETA?

[octref]

I receive many notifications per day and I'm not there to keep everyone posted. You can subscribe to the PR.

[BitOfGold]

Instead of Format Document, I can use 'Beutify Vue' command.
Took a while to get it, this is a separate command.