如何在我的 *.svelte 文件中配置自动格式化？

Question

我是 Svelte （以及一般框架）的新手，我已经建立了一个 Svelte 项目并正在尝试一些事情。

但格式确实让我分心，目前我的代码被自动格式化为（ Shift + Option + F ）：

我有办法配置这个吗？

我试过了：

• 将密钥添加prettier到我的package.json
• 在vscode文件夹中添加settings.json文件，内容如下：

    {
        "prettier.tabWidth": 4,
    }

除了更改选项卡大小之外，我还希望将上图中的代码自动格式化为：

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

模板代码也自动格式化为：

我认为如果像这样的话会更容易阅读：

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

请知道如何配置的帮我一下，谢谢！

Answer 1

关于您的问题“将大括号放在同一行与将大括号放在下一行”：有一个与此相关的问题已解决，并且已添加选项“braceStyle”，但仅适用于 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. |

为了配置 prettier ，我在放置配置的工作区中使用了 .prettierrc 文件。

Ad @name:clitetailor 关于“format svelte files”的评论：不知道将哪个配置放入哪个配置文件以使 prettier-plugin-svelte 工作，但最终安装了 Svelte VS Code 插件：jamesbirtles.svelte-vscode。它内部使用 prettier-plugin-svelte，并对 VS code 进行正确配置。svelte 文件格式在安装后立即生效。