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

【问题标题】：how to configure the auto-formatting in my *.svelte files?如何在我的 *.svelte 文件中配置自动格式化？
【发布时间】：2019-07-24 17:41:55
【问题描述】：

我是 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>

如果您知道如何配置，请帮助我，谢谢！

【问题讨论】：

尝试添加 editorconfig 插件和 .editorconfig 文件。你检查你的 vscode 默认格式化程序配置了吗？
如果你想格式化你的 svelte 文件，你可能需要 vscode svelte 插件。如果您想自己配置更漂亮，请将 "[svelte]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } 添加到 settings.json 并且不要忘记安装 prettier-plugin-svelte 并将其添加到配置文件中。注意：prettier 插件可能与 eslint 插件冲突。

标签： visual-studio-code vscode-settings code-formatting svelte

【解决方案1】：

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

对于configure prettier，我在我的工作区中使用了一个 .prettierrc 文件，我在其中放置了configuration。

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

【讨论】：

【解决方案2】：

在“vscode”编辑器中格式化单个 .svelte 文件。

https://marketplace.visualstudio.com/items?itemName=melihaltintas.svelte-format

键盘快捷键 mac: cmd+ctrl+p 赢：alt+ctrl+p

【讨论】：