cannot use prettier-plugin-svelte with prettier-plugin-tailwindcss from vscode

[opensas]

I configure my project following these instructions

But vscode cannot use esbenp.prettier-vscode to format Svelte files, I get the following error:

from the command line pnpm format works as expected

---

Steps to reproduce:

pnpm create svelte@latest svelte-prettier-tailwindcss

- Skeleton project
- using TypeScript syntax
- Add Prettier for code formatting

cd svelte-prettier-tailwindcss

pnpm install

pnpx svelte-add@latest tailwindcss

pnpm install -D prettier prettier-plugin-tailwindcss

.prettierrc file

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
	"pluginSearchDirs": false,
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

.vscode/settings.json file

{
	"files.autoSave": "onFocusChange",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"prettier.configPath": ".prettierrc",
	"[svelte]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}

installed extensions

• Svelte for VS Code - svelte.svelte-vscode v107.5.1
• Tailwind CSS IntelliSense - bradlc.vscode-tailwindcss v0.9.11
• Prettier - Code formatter - esbenp.prettier-vscode v9.13.0

package.json

{
	"name": "svelte-prettier-tailwindcss",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --plugin-search-dir . --check .",
		"format": "prettier --plugin-search-dir . --write ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^2.0.0",
		"@sveltejs/kit": "^1.5.0",
		"autoprefixer": "^10.4.14",
		"postcss": "^8.4.23",
		"postcss-load-config": "^4.0.1",
		"prettier": "^2.8.8",
		"prettier-plugin-svelte": "^2.8.1",
		"prettier-plugin-tailwindcss": "^0.3.0",
		"svelte": "^3.54.0",
		"svelte-check": "^3.0.1",
		"svelte-preprocess": "^5.0.3",
		"tailwindcss": "^3.3.1",
		"tslib": "^2.4.1",
		"typescript": "^5.0.0",
		"vite": "^4.3.0"
	},
	"type": "module"
}

[opensas]

just did a couple more test, and I think I found the issue

I needed to add "files.associations": {"*.svelte": "html" } to my settings file, I guess that with that configuration vscode prettier extensions knows it can format svelte files

I'll do a couple more tests anyway

my current ./.vscode/settings.json

{
	"files.autoSave": "onFocusChange",
	"files.associations": { "*.svelte": "html" },
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"prettier.configPath": ".prettierrc",
	"[svelte]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"editor.formatOnSave": true
}

[opensas]

The "files.associations": { "*.svelte": "html" }, brought other troubles, basically since svelte files are treated as HTML typescript syntax is not allowed.

So I had to add this instead "prettier.documentSelectors": ["**/*.svelte"],

The reason for this option is explained here

Since we are we are overriding svelte files from the .prietterrc file (with { files: ['*.svelte'], options: { parser: 'svelte' } }) we also need to let the prettier vscode extension know that it can handle svelte files.

Also found this comment with the same solution

perhaps we could add a mention in the docs about this setting, it was particular hard to find

---

edit: just submitted this PR