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