@prettier/plugin-pug support

[basaran]

Hello,

Thank you for svelte. My current workflow is vue, and I have been happily using prettier-eslint with vscode to format all my pug templates. I decided to explore svelte last night but had some issues with the environment config.

I used preprocess to enable pug compiling and that was smooth, but for some reason I'm not able to get prettier to format pug templates. I tried a few things including invoking prettier from the cli and it also wouldn't format the pug template. If you could shed some light I will surely appreciate it.

Is what I'm trying to do is supported?

<template lang="pug">
    main
        h1.something(
            x="a",

            b="a"  )
            | Hello {name}

</template>

    "[svelte]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": false,
        "editor.formatOnPaste": false,
        "editor.highlightActiveIndentGuide": false,
        "editor.renderIndentGuides": false,
        "editor.defaultFormatter": "svelte.svelte-vscode"
    },

module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: true,
    printWidth: 100,
    singleQuote: true,
    overrides: [
        {
            files: "*.svelte",
            options: {
                // "svelteSortOrder" : "scripts-markup-options-styles",
                // "svelteStrictMode": true,
                svelteBracketNewLine: false,
                // "svelteAllowShorthand": false,
                svelteIndentScriptAndStyle: false,
                tabWidth: 8,
                pugTabWidth: 8,
                pugPrintWidth: 90,
                pugSingleFileComponentIndentation: false,
                pugWrapAttributesThreshold: 3,
                pugClassNotation: "as-is",
                pugWrapAttributesPattern: "^v-(if|else|for)",
                pugSortAttributes: "asc",
                pugClosingBracketPosition: "last-line",
            },
        },
    ],
};
// svelte options above are functional and they work. But not the pug options.

[basaran]

It seems I got it to work with the vue parser, and taking out the svelte plugin altogether. But please let me know if there is an official way of doing this.

[dummdidumm]

The problem is that up until recently Pug did not support Svelte templates. I'm not sure if this changed yet. @Shinigami92 might know more, he got in contact with us recently trying to add support. If it does work now, we need to update prettier-plugin-svelte to no longer ignore the contents inside <template lang="pug"> and instead try to hand it off to pug - hope it will work that way.

[Shinigami92]

HELLO 👋 😃

finally there is someone out there with a real world svelte example!!

we are exactly looking for you!

Please create an issue in my repo https://github.com/prettier/plugin-pug/issues/new?assignees=&labels=&template=bug-report.md&title=Bug%3A+ and copy paste your example there
Also link this issue
Also, if you have one, please create a basic svelte project and create a repo for that, so I can test it on my own

Then I can start working on improved svelte support

---

But yes, it could be due to missing support in prettier-plugin-svelte 🤔
I serve first class support for vue, but I would love to support svelte also. We already have a new framework flag for svelte in the upcoming 1.14.0 not releases yet
But currently the flag is just an alias for vue 😅

[basaran]

thank you for getting back, prior to posting here I already had tried the main at Shinigami's repository with the framework options, but I couldn't get it to format without specifying the parser option.

I made a repo with all the information and troubleshooting I have so far. I also ran into some issues with eslint while using it with prettier-eslint and that is also included in the repo readme. If you like me to create a different issue for it, please let me know.

https://github.com/basaran/svelte-pug

[basaran]

Hello, sveltejs/prettier-plugin-svelte#57 seems to be different than what I encountered. In that issue, the author is trying to use prettier within eslint as a plugin. I tried to use prettier-eslint module, which executes prettier first and eslint second. So conflicting rules shouldn't really matter, eslint should just override any changes made by prettier.

I will debug prettier-eslint over the weekend and update here with my findings.

[dummdidumm]

If you install prettier and the latest version of prettier-plugin-svelte and @prettier/plugin-pug , Pug will be formatted within <template lang="pug"> tags now.