prettier: Pug plugin doesn't work for the .vue files

Environments:

  • Prettier Version: 1.18.2
  • Running Prettier via: CLI
  • Runtime: node.js v8.15.0
  • Operating System: MacOS

Steps to reproduce:

Expected behavior: Template inside the pug.vue should be prettified

Actual behavior: template inside the pug.vue isn’t touched by prettier

If you run prettier --write *.pug, you can see that the plugin itself works perfectly. The plugin developers suggested to write here: (https://github.com/prettier/plugin-pug/issues/5)

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 10
  • Comments: 26 (19 by maintainers)

Most upvoted comments

👋, @prettier/core team! I may have found a hint for people wanting to use @prettier/plugin-pug and Vue templates.

https://github.com/prettier/prettier/issues/5371 references a time when there were troubles with Vue templates written with Pug, Prettier formatting Pug templates as HTML templates.

As far as I understand, it got fixed by ignoring template tags with a lang attribute different to html thanks to a shouldPreserveElementContent function: https://github.com/prettier/prettier/pull/5388/files#diff-0558c7e4048f9cad5b9156aecca77883R40-R47

Should a modification be done directly to shouldPreserveElementContent in prettier/language-html/utils to check for other kind of templating engines depending on the plugins installed?

Or in prettier/language-html/syntax-vue ?

@Shinigami92 (maintainer of @prettier/plugin-pug) also suggested in https://github.com/prettier/plugin-pug/issues/5#issuecomment-536993369:

In my opinion I would suggest to create something like prettier/language-pug/utils.

I would be happy to help for this issue, but I don’t know where to start (yet)! 💯

As soon as I have some hints on what’s the recommended way to add something like this to Prettier, yes 🙂

Well, I just set up vue with pug, and it makes writing code just much easier and it’s great not having to constantly adding redundancies like closing tags etc. As a coder you want to keep it DRY, and what better way to reduce repetition, clutter and improving code readability than using pug. And thanks for your work on prettier pug @Shinigami92 ! 🏆

@kissu Sorry mate, but your comment doesn’t help.
If you choose not to use pug anymore, do not use it. But for all other users who use pug, this fix would be very welcome.
I don’t want to let my 2k weekly download users down.

Would be awesome, any news yet please? 😃

I really recommend ditching pug and use regular HTML. My team gave up but it’s for the good. 👍

We think that it is not a problem of my plugin since the embedded pug in markdown works well.

I’m trying to clean it up, but seem not easy and breaks too many other things.

@Shinigami92 We already improve the Vue SFC parsing, now the template[lang="pug"] is correctly parsed as raw text, do we need do something else to support this feature?

I’m debugging

$ cat 1.vue
<template lang="pug">
p= "This code is"+ ' <escaped>!'
</template>

$ node bin/prettier 1.vue
<template lang="pug">
  p= 'This code is' + ' <escaped>!'

</template>

I made it work, but very dirty way.

Will come back to this in around 8h, have to work now