Vetur: `Prettier format failed [Error - 14:06:21] [object Object]` on style formatting

[heejongahn]

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

Info

• Platform: macOS
• Vetur version: 0.11.3
• VS Code version: 1.18.1
• prettier version: 1.9.1

Problem

Vetur's format-on-save crashes for style tags. Below is (the edited version of) one of the file which crashes.

<template>
  <!-- Removed as irrelevant -->
</template>

<script lang="js">
export default {
  /* Removed as irrelevant */
}
</script>

<style lang="less" module>
.a {
  cursor: pointer;
  padding: 0px 14px;
  border-radius: 2px;
  font-weight: bold;

  &:hover {
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.1);
  }
}
</style>

When I save this file, vue-language-server output gives below.

Prettier format failed
[Error - 14:06:21] [object Object]

If I set "vetur.format.defaultFormatter.less": "none", the error goes away and format-on-save works fine. IMO it's related to <style> tag, not specifically lang="less", as it is reproduced with even when lang="less" is removed. Maybe the reason is totally apart from style tag but that's my best guess for now.

This might be other project's issue but I'm filing it here for now, as creating separate test.less in the repository with the same content and trying prettify test.less worked just fine. How could I investigate more on this? It would help if I can at least see what that [object Object] is...

Reproducible Case

I'm not sure if this is reproducible on other computer but I'll try to give as much information as possible.

VS Code User conf

{
  "editor.insertSpaces": true,
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "terminal.integrated.fontFamily": "Hack",
  "terminal.integrated.fontSize": 16,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Material Theme",
  "material-icon-theme.showUpdateMessage": false,
  "window.zoomLevel": 0,
  "workbench.panel.location": "bottom"
}

VS Code Workspace conf

{
    "editor.tabSize": 2,
    "editor.formatOnSave": true
}

.prettierrc

{
    "printWidth": 80,
    "useTabs": false,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "es5",
    "parser": "babylon",
    "semi": true,
}

[HerringtonDarkholme]

I can reproduce this. Thanks for reporting!

[HerringtonDarkholme]

@octref This is caused by not setting proper parser. https://prettier.io/docs/en/options.html#parser

[HerringtonDarkholme]

I have tested further. It turns out that prettier isn't updated to latest version.

Prettier 1.7.1 has split scss/less parsers.
https://github.com/prettier/prettier/commit/c6bac7cfe698fd9d68ce962b214befb81dff650b#diff-b9cfc7f2cdf78a7f4b91a753d10865a2
So we changed the parser id. However, for older prettier it breaks.

I guess the same problem occurs to you. A manual update might be helpful.

[heejongahn]

@HerringtonDarkholme

First off, thanks for taking time into this issue.

I'm afraid I don't get which prettier I should manually upgrade, as I'm already using prettier 1.9.1 (as stated in the issue) for the project. Do I have to upgrade the prettier that vetur is internally using? If so, how could I do that?

[HerringtonDarkholme]

I mean the prettier bundled in vetur. You can find it in path listed here. https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-crash

[heejongahn]

I upgrade the prettier in the ~/.vscode/extensions/octref.vetur-0.11.5/server to 1.9.2 and [restart / pause and resume usage] vetur but same symptom occurs. I also tried compiling server and client just in case but still problem isn't solved... Maybe I misunderstood what you've said as I'm new to the extension internals. I'll try to make it work 😅

Also, would it be okay to send a PR if I figure out how to solve this?

[HerringtonDarkholme]

I upgrade the prettier in the ~/.vscode/extensions/octref.vetur-0.11.5/server to 1.9.

That's exactly what I mean.

You might need to uninstall & reinstall vetur. Vetur's package json has already update prettier's version.

[heejongahn]

After logging e.message and looking into every section that might cause problem, I concluded that the issue was "parser": "babylon" in my .prettierrc 😱 Removing that configuration made the issue go away.

Regardless, I wouldn't be able to troubleshoot this without your help. Thanks for your time again and have a nice day!

[octref]

Thanks for tracing to the root cause.

For style section, it doesn't make sense to take parser option from .prettierrc, since css/less/scss each has a corresponding parser. However, for <script> we default to babylon/ts but should allow user to specify a parser such as flow in .prettierrc.

I'll push a fix for this tomorrow.

[heejongahn]

That would make much more sense 😃 thanks!