Unable to get working VSCode formatOnSave

[markjwiggins]

Apologies if this is a naive question, not had much experience with how prettier & plugins work...

I am trying to get this to work in a Svelte (+TS) setup, and it seems to run fine if I run the pnpm run format script across all files, but the plugin is not running on save with formatOnSave enabled in VSCode.

Is there something I need to set to enable plugins when running within VSCode formatOnSave?
Or is it because the formatOnSave uses the Prettier extension, so doesn't see the project installed plugin and would only work if a Tailwind Prettier extension appeared?

VSCode settings.json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

Current set up...
.prettierrc

{
	"useTabs": true,
	"trailingComma": "none",
	"semi": true,
	"printWidth": 100,
	"tailwindConfig": "./tailwind.config.cjs"
}

tailwind.config.cjs in the root of application (same as .prettierrc)

module.exports = {
	content: ["./src/**/*.{html,js,svelte,ts}"],
	theme: {
		extend: {}
	},
	plugins: []
};

.vscode/settings.json

{
	"[svelte]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "svelte.svelte-vscode"
	}
}

Any guidance would be great!

[markjwiggins]

Ahh, partially found the issue in #10 as I am using pnpm...
So have migrated to prettier.config.cjs and added plugins: [require("prettier-plugin-tailwindcss")] which now means it works for .html files, but still struggling for .svelte files...

I'm guessing it's because I am calling svelte.svelte-vscode, but adding Prettier as the formatted for .svelte fails to run.
Is there something I should change this too?

[reinink]

@markjwiggins Hey, have you seen this compatibility message in the readme? Try removing the prettier-plugin-svelte plugin if you have it installed.

Compatibility with other Prettier plugins

To make this plugin work we had to use private Prettier APIs that can only be used by a single plugin at once. This means this plugin is incompatible with other Prettier plugins that are using the same APIs.

The most popular example we know of is prettier-plugin-svelte, which can't be installed at the same time as the Tailwind CSS plugin.

To work around this, we've bundled prettier-plugin-svelte directly into prettier-plugin-tailwindcss, so if you'd like to use this plugin with Svelte, just uninstall prettier-plugin-svelte and everything should work as expected.

[markjwiggins]

Hi @reinink
Yes, I did see the note and did remove the package, but still doesn't seem to work...

My package.json deps are

"devDependencies": {
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@typescript-eslint/eslint-plugin": "^4.31.1",
		"@typescript-eslint/parser": "^4.31.1",
		"autoprefixer": "^10.4.2",
		"eslint": "^7.32.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-html": "^6.2.0",
		"eslint-plugin-svelte3": "^3.2.1",
		"jshint": "^2.13.3",
		"postcss": "^8.4.5",
		"prettier": "^2.5.1",
		"prettier-plugin-tailwindcss": "^0.1.4",
		"svelte": "^3.44.0",
		"svelte-check": "^2.2.6",
		"svelte-preprocess": "^4.9.4",
		"tailwindcss": "^3.0.15",
		"tslib": "^2.3.1",
		"typescript": "^4.4.3"
	},

[dylanmichaelryan]

Hey, i had some similar issues with my .blade.php files

After a little bit of research i put the following in my prettier config

{
    "overrides": [
        {
          "files": "*.blade.php",
          "options": {
            "parser": "html"
          }
        }
      ]
  }

Maybe it helps you, of course you would have to change ".blade.php" to ".svelte"

[bradlc]

Hey @markjwiggins. In your settings you have the default formatter for .svelte files set to svelte.svelte-vscode, but this needs to be esbenp.prettier-vscode:

{
	"[svelte]": {
		"editor.formatOnSave": true,
-		"editor.defaultFormatter": "svelte.svelte-vscode"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

This is because svelte.svelte-vscode uses prettier-plugin-svelte under the hood, and as @reinink mentioned prettier-plugin-tailwindcss is not compatible with this plugin. Using esbenp.prettier-vscode should fix your issue 👍

[markjwiggins]

Hi @bradlc
If I change it to esbenp.prettier-vscode I get a error message when saving where it looks to run prettier but fails...

[bradlc]

Ah sorry @markjwiggins, I missed that! Does restarting the extension host help? (Developer: Restart Extension Host command from the command palette)

[markjwiggins]

Unfortunately not, tried running the command, also restarting VSCode and running it...
Still no joy

[markjwiggins]

@dylanmichaelryan sorry I missed your comment the other day, adding an override doesn't seem to help.
I added it to the prettier config, also changed the settings.json to esbenp.prettier-vscode, but it doesn't seem to pick up prettier when saving .svelte...
It formats .svelte file when I run pnpm run format but not on save...
So running manually is my workaround at the moment, but definitely still would like it to work on save, if there are any more ideas?

[MatiasVerdier]

I had the same issue using pnpm, changed to npm, reloaded vscode and it started working.

btw I just found this that solves the issue with pnpm sveltejs/prettier-plugin-svelte#155 (comment)

[markjwiggins]

@MatiasVerdier great find!
Adding "prettier.documentSelectors": ["**/*.svelte"], to my VSCode settings.json and having...

plugins: [require("prettier-plugin-tailwindcss")],
overrides: [
	{
		files: "*.svelte",
		options: { parser: "svelte" }
	}
],

in my prettier.config.cjs seems to get formatOnSave to work!

May be worth adding a note in the documentation unless I'm in a minority of Svelte + pnpm + tailwindcss 😃

[bradlc]

Glad you resolved the issue @markjwiggins! Will consider adding the documentSelectors thing to the readme, and we already added a note about pnpm 👍