VSCode 和 svelte 的格式问题

Question

我在使用 svelte 的 vscode 中遇到了一些奇怪的格式问题。 每当我创建一个 HTML 标记时，比如说<p></p> ，只要我保存或单击其他地方，它就会重新格式化为： <p /> 。 我不知道是怎么回事。 它似乎也不喜欢像<slot></slot>这样的某些 Svelte 标签。 有人遇到过这种情况么？ 如果是这样，你做了什么来修复它？

Answer 1

如果你使用的是官方的 Svelte 扩展，它只有一种格式化代码的方式：Prettier。

如果您想恢复控制权，请关闭svelte.plugin.svelte.format.enable 。 您还可以创建一个.prettierrc并查看是否有任何 Prettier 选项来更改此特定行为。

---

顺便说一句：即使像<div />这样的东西在 HTML 中是无效的，它不在 Svelte 中，因为无论如何代码都会被编译。

如果组件中只有一个这样的div ，它会被编译为：

function create_fragment(ctx) {
    let div;

    return {
        c() {
            div = element("div");
        },
        m(target, anchor) {
            insert(target, div, anchor);
        },
        p: noop,
        i: noop,
        o: noop,
        d(detaching) {
            if (detaching) detach(div);
        }
    };
}

或使用 SSR：

const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
    return `<div></div>`;
});

Answer 2

如果您使用 Svelte 进行 VS Code 扩展，您可以在扩展设置中启用 svelte 严格模式，或者将其放入 settings.json "svelte.plugin.svelte.format.config.svelteStrictMode": true