Configuration help

Hi! Sorry if this is really basic, but I have difficulties configuring prettier-plugin-svelte with a configuration file in VS Code. The Svelte extension is installed and I created a prettierrc.json file like so:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "printWidth": 80,
  "singleQuote": false,
  "svelteSortOrder" : "scripts-markup-styles",
  "svelteStrictMode": true,
  "svelteBracketNewLine": false,
  "svelteAllowShorthand": false
}

Some configuration is for standard Prettier with JS. However, whatever the values I use for the svelte options, it doesn’t seem to make any difference when I format a .svelte file. For example, even with "svelteAllowShorthand: false", the shorthand {id} won’t be reformatted to id={id}:

<div class="ui input" class:transparent="{!focussed}" {id}>

Thanks for your kind help!

[Shackless]

In case anyone else stumbles upon this (I wasn’t able to enable “Format on Save”): Since the launch of the official svelte vs-code plugin, the defaultFormatter is no longer called JamesBirtles.svelte-vscode but svelte.svelte-vscode.

So this works for me in .editor/settings.json:

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

[davidsavoie1]

Well, I’ve finally found how to configure VSCode to format Svelte files properly. This article (VS Code Set Up at the bottom) helped me find the missing piece in the process. I only needed the svelte-vscode extension, then specify the default formatter for Svelte files in VS Code settings:

{
    ...
    "[svelte]": {
        "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
    }
}

Now, when I use the Format document command (with keyboard shortcut) or when I save with Format on save setting enabled, everything falls neatly into place. Great!

And if, like me, you didn’t know how to open the settings as JSON to specify this configuration, when in the settings window, there’s a button in the upper right corner that allows to do so.

Seems to be working just fine now… I didn’t see any mention of this in this extension’s documentation, nor in svelte-vscode one. Would be a great addition!