Wired formats with `svelteIndentScriptAndStyle` option in WebStorm

[RoyRao2333]

Here's my .prettierrc.json:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "svelteSortOrder": "options-styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": false,
  "svelteAllowShorthand": false,
  "svelteIndentScriptAndStyle": false,
  "tailwindConfig": "./tailwind.config.js",
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

Before formatting:

After formatting:

You can notice that codes in <script> tag lost indents. <button>'s props is also formatted wrong.

But if I remove "svelteIndentScriptAndStyle": false and format:

Seems alright but I think the trailing > of <button> is supposed to be in a new line...

I'm new to Svelte and really love this framework. I came from React and I just copy & paste the .prettierrc from my previous React project and made some changes. Don't know if I set something wrong, any help would be appreciated!

[dummdidumm]

This works as expected:

• the indentation option set to false results in not indenting Script and Style tags at the root: https://github.com/sveltejs/prettier-plugin-svelte#svelte-indent-script-and-style . So setting it to true or just removing the option from your config is the right move
• the class attribute is not formatted currently so your can sort long classnames into as many lines as you please

Hope this clears things up - welcome to Svelte!

[RoyRao2333]

@dummdidumm

Thanks for the explanations! Really helpful. :)

But as I described above, can I make the trailing > of <button> in a new line like this?

I think this can separate component's attributes from the children (or slot?) within it and it's easy to read.

[dummdidumm]

For that, remove "svelteBracketNewLine": false, from your config

[RoyRao2333]

@dummdidumm

It's working and thanks for the help! You truly saved my day!