Vetur: Prettier Pug Plugin: Not formatting as expected.

[aaronguernsey]

Info

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ
• Platform: macOS
• Vetur version: 0.28.0 Problem Problem

Problem

Pug templates don't use @prettier/plugin-pug specific settings. According the developer over on @prettier/plugin-pug I think this is because the package needs to be updated in Vetur's package.json.

Original Issue I opened on @prettier/plugin-pug

Issue: https://github.com/prettier/plugin-pug/issues/124
Related Issue: https://github.com/vuejs/vetur/issues/527

Temporary Solution

I had to downgrade Vetur's version to 0.27.3, and then any @prettier/plugin-pug settings work. I will open a request on the Vetur repo and see about getting them to update to the current version.

Input

<template lang="pug">
button.hello( class="world" disabled @click="handleClick"  )
</template>

Expected Output

<template lang="pug">
button.hello.world( disabled  @click="handleClick" )
</template>

Actual Output

<template lang="pug">
button.hello.world( disabled, @click="handleClick"  )
</template>

Additional Context

My project has a .prettierrc file with the options

{
  "semi": false,
  "arrowParens": "always",
  "printWidth": 600,
  "pugAttributeSeparator": "none"
}

[lehni]

It's worth mentioning that pugAttributeSeparator: 'none' is only available since @prettier/plugin-pug v1.7.0, and was released yesterday: https://github.com/prettier/plugin-pug/pull/116

So any of the plugin versions bundled with Vetur wouldn't be able to handle this option. What's interesting is that apparently you've been able to use your own newer version of @prettier/plugin-pug with Vetur v0.27.3, but not with the latest release of Vetur?

[aaronguernsey]

@lehni Yes, that is correct. Am I missing something?

[Shinigami92]

https://github.com/vuejs/vetur/blob/20eb42ece7c156fb61452ccb40e0c13da0a4a8da/server/package.json#L24

I'm a little bit curious why this isn't using the latest 1.7.0, cause it uses ^ syntax 🤔
Or is it bundled in the vetur vscode-plugin and therefore doesn't use the projects @prettier/plugin-pug version? And if so: is there a solution to tell vetur to use the latest instead of the specified one?

[lehni]

I'm not sure what happens when plugins are deployed to the VSCode marketplace. Probably the version gets set in stone and the files in node_modules are prepackaged along with the rest of the plugin? Or maybe some kind of lockfile is used?

[lehni]

@lehni Yes, that is correct. Am I missing something?

We probably all are missing something at the moment
I just wanted to make the situation a bit clearer with my comment.

[Shinigami92]

@octref A bunch of new features made it into 1.8.0 :tada:
Would be really nice if you upgrade and release :smiley:

[octref]

Will release in the next version. Note that you can install @prettier/plugin-pug in your workspace as well, if you want to use a different version than bundled plugin formatter version.

@Shinigami92 Thanks for fixing the issues!

[Shinigami92]

@octref https://github.com/vuejs/vetur/runs/1212892807#step:10:629

Something weird is going on, I cannot directly see what the issue is :thinking:
Is it just another line ending or something?

[octref]

@Shinigami92 Lol, thanks for letting me know. The issue is funny. I have @prettier/plugin-pug installed in the vetur/test/lsp/fixture folder, and Vetur passes two folders as pluginSearchDirs to prettier. Prettier then loads both plugins. And when prettier loads two plugin-pug, it formats pug with error 🤣

EDIT: Those two plugins have conflicting versions. One is 1.4.4, one is 1.8.1.

I'll write some code to safeguard against this and open an issue for prettier.

[lehni]

@octref funny to cross paths again! I started working on plugin-pug recently (after taking note of its existence through Vetur), you can see me pop up in the commits here and there ;)