Any chance to get it work with vue single components?

[xorik]

Prettier works perfectly for the <script> tag of vue single-file compontens (.vue files), but it seems like this plugin doesn't work with vue's <template lang="pug">.

Do you know if it's possible to make it work?

[Shinigami92]

Currently you can use the workaround <template lang="pug" src="./index.pug"></template>

But to leave this here, I think a good start for a PR could be: https://github.com/prettier/prettier/blob/master/src/language-html/syntax-vue.js

[Shinigami92]

@xorik Is it okay for you to use the workaround? Or does it have a high priority?
If you use the workaround, it's also a more native feeling :)

@j-f1 I created a test (locally) and tried to inspect if anything was called in my plugin. But it doesn't call anything 🤔
I thought the embed function is for this... But nope.
markdown formatting is working!

My test:

<template lang="pug">
div(class="abc")
  | {{ msg }}
</template>

<script>
export default {
  data() {
    msg: 'test';
  }
};
</script>

import { format } from 'prettier';
import { plugin } from './../../../src/index';
// ...
const actual: string = format(code, { parser: 'vue', plugins: [plugin], singleQuote: true });
// ...

Result should be that div(class="abc") formats to .abc, but I cant see any logs from my plugin. It is not invoked.

[xorik]

@Shinigami92 it would be super nice if I could use prettier with your plugin without dividing each vue file to template + script.
I'm not familiar with prettier internal API, but I could try my best to fix this bug. Prettier works with HTML and javascript/typescript sections of vue files without any issues.

Maybe I could try to make an issue to the prettier repo?

[Shinigami92]

@xorik Yes, maybe you should do that and refer to this issue.

At the moment, I don't really know if it's on the plugin side or on the prettier core side.

I'm surprised that Markdown's formatting works, and that I did nothing to support it.

[xavxyz]

But it doesn't call anything 🤔 I thought the embed function is for this... But nope.

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

prettier/prettier#5371 references a time where there were troubles with Vue templates written with Pug, Prettier formatting Pug templates as HTML templates.

It got fixed by ignoring template tags with a lang attribute different to html: https://github.com/prettier/prettier/pull/5388/files#diff-0558c7e4048f9cad5b9156aecca77883R40-R47

Now that we have awesome plugins in beta, could the plugin somehow extend the list of usable lang attributes?

Or should a modification be done directly to prettier/language-html/utils (where the check happens on lang attribute in the mentioned PR)?

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

[Shinigami92]

Please present this to @prettier/core in the related issue prettier/prettier#6298

I think this is the right way 👍

In my opinion I would suggest to create something like prettier/language-pug/utils.
I dont think I can patch something like this from this plugin.

[xavxyz]

I dont think I can patch something like this from this plugin.

I get it! 😄

Thanks, 🎩

[MentalGear]

Native single vue file integration would be nice! Any news on this?

[Shinigami92]

An update for everyone who is waiting for this functionality:
I defined a prototype test and added a comment to it

plugin-pug/test/embed/vue/embed.test.ts

Lines 7 to 8 in 5da540b

	// TODO: Remove `.skip` when https://github.com/prettier/prettier/issues/6298 is resolved
	test.skip('should format when embedded in vue', () => {

You can also see in the same file that html is working

---

So the problem is that my plugin is not notified that <template lang="pug"> should be formatted using this plugin.

[Shinigami92]

@fisker Is there an ETA when users can profit from your merge?
prettier/prettier#8465

I think we are waiting on a new prettier 2.1.0 release, do we?

[fisker]

Yes, we still need wait for v2.1.0 release, and I don't know the schedule.

Good news is Prettier support install from the repo, so this should work.

yarn add prettier/prettier @prettier/plugin-pug
npx prettier test.vue --write

Update:

Sorry, due to this issue prettier/prettier#8474 , the format command above won't work.

yarn add prettier/prettier @prettier/plugin-pug
npx prettier test.vue --write --plugin-search-dir=.

OR

yarn add prettier/prettier @prettier/plugin-pug
npx prettier pug.vue --plugin=@prettier/plugin-pug

[Shinigami92]

@fisker Yes, I know that this is working.
But what I meant was for production and global availability

[fisker]

We'll have to wait.

[Shinigami92]

With prettier v2.1 pug within template can now be formatted