Start with tab in vue component

[jessielaf]

Request / Idea

First of all thanks for this library!

I usually start my pug with two spaces or 1 tab in my Vue template. I have recently installed prettier 2 and prettier pug and I have not found this option yet. I searched through the options but I could not find one to satisfy this need. Maybe I looked over it.

Input

<template lang="pug">
div
  h1 Hellp
</template>

Expected Output

<template lang="pug">
  div
    h1 Hellp
</template>

[Shinigami92]

So you requesting something like vue-files-script-and-style-tags-indentation, but vue-files-template-tag-indentation?

I'm thinking about if we should ask prettier itself to do this instead of my plugin 🤔
@fisker Any objection?

[fisker]

I don't think Prettier going to accept it, especially the template in html is already indented.

[Shinigami92]

Ok, then we need to implement this option into the plugin

[Shinigami92]

I don't think it's good idea to name it vue-files-template-tag-indentation when it's provided from our plugin
So maybe we should name it pug-vue-files-template-tag-indentation
But are there any other frameworks that behave the same as vue?

E.g. embedded in markdown, I do not think it's a useful option, cause there is no use case where it's useful

[jessielaf]

From my understanding Vue is the only js framework that has single-file components and uses HTML or pug in this way. The other SFC frameworks I know of are react and svelte. Both have different syntaxes.

[lehni]

Svelte has single-file components, and from my understanding you can use pug for templates there too:
https://github.com/sveltejs/svelte-preprocess

[Shinigami92]

https://github.com/sveltejs/svelte-preprocess#built-in-support-for-commonly-used-languages

[Shinigami92]

Ok so pug-vue-files-template-tag-indentation is not a good name!

Maybe pug-template-file-tag-indentation?

[lehni]

pugEmbededTemplateIndentation?

[Shinigami92]

pugEmbededTemplateIndentation?

I don't like it, cause markdown is also embedded and will not be indented

[Shinigami92]

I think we should go with pugTemplateTagIndentation, so without related to file cause that's just confusing in this context

... but ... now I see that could colide with e.g. vue's template tag synatx 🤔 damn it

Maybe pugSfcIndentation?

[Shinigami92]

I started (quite finished ^^) this feature request
But we need to find a stable name for this options, so it doesn't collide with other feature request in the future

---

Also I think the current tests are not well enough to handle some special cases

---

@fisker Is there a way I can find out that the code is currently embedded in a vue or svelte file or if it is just e.g. markdown?
So can I find out the outer parser?

Cause someone wants to provide examples in a README.md and also use it in .vue files and just want to format everything prettier --write .
And this should only indent the SFC files

[fisker]

options.parentParser

[Shinigami92]

Wow thank you @fisker
Apparently I found out that there is a mystery embeddedInHtml
I think that is even better, cause it may cover also svelte instead of only vue

I also need to add these both to DefinitelyTyped
I will add it into my DefinitelyTyped/DefinitelyTyped#47626 so I don't need to add a second PR

[Shinigami92]

Ok last step is missing: give it a stable name

1. pugSfcIndentation?
2. pugSingleFileComponentIndentation?
3. pugTemplateTagIndentation?
4. pugTemplateTagFileIndentation?
5. something different?

[lehni]

pugEmbededTemplateIndentation?

I don't like it, cause markdown is also embedded and will not be indented

But markdown does not have anything to do with <template>?

[lehni]

1. pugSfcIndentation?

This sounds quite obscure I think.

2. pugSingleFileComponentIndentation?

This is better, but it's not really the indentation of the component, it's the indentation of the pug template inside the component…

3. pugTemplateTagIndentation?

Probably the best one of the options!

4. pugTemplateTagFileIndentation?

I don't think File needs to be mentioned? They're all in files, after all :)

5. something different?

[Shinigami92]

@lehni Thanks, that was helpful

For pugTemplateTagIndentation

<template lang="pug">
  v-tooltip(bottom)
    //- vvv Below is a "template"-tag
    template(v-slot:activator="{ on, attrs }")
      v-btn(v-on="on", v-bind="attrs", color="primary", dark) Button
    span Tooltip
</template>

That is what I meant with a template tag

[fisker]

How about pugIndentationInVueSFCRootTemplate or pugIndentationForVueSFCRootTemplate

[Shinigami92]

It's not vue related, it should also work for svelte

[lehni]

eslint-plugin-vue has a rule for this. It's simply called html-indent:
https://eslint.vuejs.org/rules/html-indent.html#rule-details

[Shinigami92]

Finally some new types from DefinitelyTyped arrived

I made my decision to pugSingleFileComponentIndentation, because I think it is the best fit and doesn't conflict with to many other things like template, vue-related or embedded-markdown

@lehni Could you have a last review over my PR, then I will merge it and provide a new release

[lehni]

@Shinigami92 very swamped with work these days, I don't think I'll find the time for another 10 days or so :/

Regarding naming: I would expect pugSingleFileComponentIndentation not to be a boolean value, but to describe the amount of indentation?

[Shinigami92]

I think it's ok, I will merge it now

[lehni]

Probably too late now, but I just found out that Vetur has this setting here:

vetur.format.styleInitialIndent. It used to also have vetur.format.templateInitialIndent, but that got removed again, not sure why…

[Shinigami92]

Yeah, I already created a release
I prefer incremental releases with a minimum of breaking changes