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