Is there a way to get Pug templates working?

According to the Vite github issues, it should just require

pug

pug

to be installed. I've done that but VsCode seems to be formatting

pug

pug

markup incorrectly.
Pug is an indent-senstive format but it's taking this:

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

and converting it to this

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

... which is annoying and broken. Any thoughts?
It seems to be the

Svelte for VsCode

Svelte for VsCode

plugin that is doing this mal-formatting.

However, even if I disable it, the build does not seem to work with pug templates... it renders them as plaintext

TyphonJS•4y ago•

6 replies

geoidesic [Aardvark Games]

Is there a way to get Pug templates working?

According to the Vite github issues, it should just require

pug

pug

to be installed. I've done that but VsCode seems to be formatting

pug

pug

markup incorrectly.
Pug is an indent-senstive format but it's taking this:

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol
    DocInput(attr={"name"})
    textarea(bind:value={$documentStore.system.description})
    textarea(bind:value={$documentStore.system.lore})
</ApplicationShell>

and converting it to this

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  .flexcol DocInput(attr={"name"}) textarea(bind:value={$documentStore.system.description}) textarea(bind:value={$documentStore
    .system.lore})
</ApplicationShell>

... which is annoying and broken. Any thoughts?
It seems to be the

Svelte for VsCode

Svelte for VsCode

plugin that is doing this mal-formatting.

However, even if I disable it, the build does not seem to work with pug templates... it renders them as plaintext

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

TyphonJS

219 Members

Join

Is there a way to get Pug templates working?

Is there a way to get Pug templates working?

Continue the conversation

TyphonJS

Continue the conversation

TyphonJS

Similar Threads