@prettier/plugin-pug support

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.

[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.

[basaran]

Hello, https://github.com/sveltejs/prettier-plugin-svelte/issues/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.