Vetur: vs code, code formatting is not working.

[lzl124631x]

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

Info

• Platform: Win
• Vetur version: 0.11.5
• VS Code version: 1.19.1

Problem

I uninstalled all the extensions and reinstalled vetur several times, vue code formatter still doesn't work.

{
    "window.openFilesInNewWindow": "off",
    "explorer.confirmDelete": false,
    "[vue]": {
        "editor.formatOnSave": true,

    },
    "files.associations": {
        "*.vue": "vue"
    }
}

Reproducible Case

[lzl124631x]

I found that formatting will happen when I save file, but only formats JS and CSS, html is not formatted.

But still ctrl+k, ctrl+f(command for code formatting) doesn't work.

[lzl124631x]

https://github.com/vuejs/vetur/blob/master/docs/formatting.md. Where is this setting?

"vetur.format.defaultFormatter": {
  "html": "none",
  "css": "prettier",
  "postcss": "prettier",
  "scss": "prettier",
  "less": "prettier",
  "js": "prettier",
  "ts": "prettier",
  "stylus": "stylus-supremacy"
}

[lzl124631x]

I added the following setting to .vscode/settings.json.

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

The formattingOnSave for HTML does work.

• Why is the default html formatter disabled?
• Can you add "where to add those json config"? You only listed those json but didn't say where to put it.

--

update: How to edit .vscode/settings.json?

ctrl + shift + p > Configure Language Specific Settings > Vue > Edit the file.

My current settings:

{
    "window.openFilesInNewWindow": "off",
    "explorer.confirmDelete": false,
    "[vue]": {
        "editor.formatOnSave": true,

    },
    "files.associations": {
        "*.vue": "vue"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

[cmnzs]

I think this has some more info about why it is disabled: https://github.com/vuejs/vetur/issues/484

[liuguangyong93]

me too,Ctrl+K,Ctrl+F doesnot work, it has been resolved??

[HerringtonDarkholme]

As @cmnzs has said, html formatting is disabled by default because our formatter doesn't work well enough.

[octref]

@lzl124631x
I'm curious about why you are getting "No formatter installed" error.

If you remove this:

    "files.associations": {
        "*.vue": "vue"
    }

Do you still get that error?

[octref]

@percy507 That is WRONG advice. You should not associate Vue with html.

[MrFoxPro]

I solved this by removing all parameters in template tag (e.g. src, lang)

[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

[arturmaiz]

Try go to vetur configuration, and change => "vetur.format.defaultFormatter.html": "js-beautify-html"

[songfs]

me too,Ctrl+K,Ctrl+F doesnot work, it has been resolved??

this problem has been resolved?

[yogithesymbian]

I added the following setting to .vscode/settings.json.

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

The formattingOnSave for HTML does work.

• Why is the default html formatter disabled?
• Can you add "where to add those json config"? You only listed those json but didn't say where to put it.

--

update: How to edit .vscode/settings.json?

ctrl + shift + p > Configure Language Specific Settings > Vue > Edit the file.

My current settings:

{
    "window.openFilesInNewWindow": "off",
    "explorer.confirmDelete": false,
    "[vue]": {
        "editor.formatOnSave": true,

    },
    "files.associations": {
        "*.vue": "vue"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

its work, thank you...