how to configure the auto-formatting in my *.svelte files?

Question

I am new to Svelte ( and also to frameworks in general ), I have set up a Svelte project and am trying out a few things.

But the formatting is really distracting me, currently my code gets auto-formatted into this ( Shift + Option + F ):

Is there a way for me to configure this?

I've tried:

• adding the prettier key to my package.json
• adding settings.json file in the vscode folder with the following:

    {
        "prettier.tabWidth": 4,
    }

In addition to changing the tab size, I'd also like the code in the image above to auto-format to:

    config = Object.assign({
        mass: 1,
        stiffness: 100,
        damping: 10,
        velocity: 0
    }, config);

The template code are also auto-formats to this:

I think it's much easier to read if it was like this:

    <FadeIn
        from={{ blur: 8, scale: 0.6 }}
        config={{ stiffness: 10, damping: 20 }}
    >
        <p>Hello</p>
    </FadeIn>

Please help me if you know how to configure this, thanks!

Answer 1

Regarding your question to "put brace in same line vs put brace in next line": There was an issue regarding this which has been resolved and an option 'braceStyle' has been added, but only for PHP.

| `braceStyle`    | `"psr-2"` | If set to `"psr-2"`, prettier will move open brace for code blocks (classes, functions and methods) onto new line. <br> If set to `"1tbs"`, prettier will move open brace for code blocks (classes, functions and methods) onto same line. |

To configure prettier, I use a .prettierrc file in my workspace where I put the configuration.

Ad @name:clitetailor's comment regarding "format svelte files": Did not know which configuration to put into which config file to make prettier-plugin-svelte working, but ended up with installing Svelte VS Code Plugin: jamesbirtles.svelte-vscode. It internally uses prettier-plugin-svelte, and does proper configuration of VS code. Format of svelte files worked immediately after install.