vscode prettier doesn't seem to use the plugin, even when .prettierrc configured

[mikemaccana]

Per the instructions I've created a config file:

{
  "plugins": ["prettier-plugin-svelte"]
}

And when I save the file and format with the Prettier extension:

Prettier - Code formatter
v10.1.0
Prettier
prettier.io

It uses the config file:

["INFO" - 12:09:26] Using config file at '/Users/mikemaccana/Code/mycompany/myapp/.prettierrc'

But no changes occur to my svelte files.

Command line works fine:

npx prettier --write --plugin prettier-plugin-svelte .

(I can see the files are now neatened)

[potatotomatobanana]

Use .prettierrc.js file name, it may fix the issue.

NOTE: Use string values for plugins same as:

{
  "plugins": ["prettier-plugin-svelte"]
}

[Loizzus]

I have a similar issue where it seems the settings in my .prettierrc file are not being applied. These are my settings:

{
    "plugins": ["prettier-plugin-svelte"],
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],  
    "bracketSameLine": true,
    "htmlWhitespaceSensitivity": "ignore",
    "useTabs": true,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none",
    "printWidth": 160
}

And in my VS Code settings.json I added these lines:

  "[javascript][html][typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode",
  },

Changes are being applied to my svelte files but code in a +page.svelte file that I am happy being formatted like this:

<div class="result-stats">
    <span>Displaying <b>{arrRangeStart + 1}-{arrRangeStart + displayedUsers}</b> of <b>{teamMembers.length}</b> team members</span>
</div>

is being formatted to this:

<div class="result-stats">
    <span
        >Displaying <b>{arrRangeStart + 1}-{arrRangeStart + displayedUsers}</b> of
        <b>{teamMembers.length}</b> team members</span
    >
</div>

The config file is in the root of my project directory so I don't see what the issue could be.

[DePasqualeOrg]

Use .prettierrc.js file name, it may fix the issue.

I tried this, and it works for a little while, but then the plugin stops working, and I have to change the name back to get it to work again, until it stops working and I have to change it back ... ad infinitum.

[TonyLeCode]

Yea, the plugin randomly stops working for me. Changing path to something invalid back to .prettierrc seems to be a temporary solution.

[DePasqualeOrg]

It seems that the issue may be due to problems with prettier-vscode.

[asjir]

Here's what has worked for me:

• In settings.json: "[svelte]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}, and "prettier.configPath": ".prettierrc.yaml",

• In .prettierrc.yaml:

  plugins:
  - prettier-plugin-svelte
  overrides:
  - files: "*.svelte"
  options:
    parser: "svelte"

Ad I installed prettier and prettier-plugin-svelte in project root.

Further observations to hopefully help find the issue

In particular "editor.defaultFormatter": "svelte.svelte-vscode", I didn't manage to get to use my config. Also I never managed to get prettier to work consistently without setting --config explicitly. Running prettier with --find-config-path never found the path - renaming ".prettierrc.yaml" to ".prettierrc" didn't help.

This considered the only fix svelte team can apply I suppose is adding support for specifying prettier config path.