VSCode Emmet identation doesn't work properly with Svelte files

Question

I'm trying to understand how can I make Emmet work properly on .svelte files.
The problem doesn't encounter when I'm using PHP files or HTML files.

When I'm using a simple Emment abbreviation, like div, the output after the enter is the same for both languages (<div>|</div>), with the cursor in the middle of the block.

Using HTML files works properly; so after pressing enter, the block will be formatted (| represents the cursor):

<div>
    |
</div>

While using .svelte this doesn't work:

<div>
|</div>

How can I tell Emmet to indent code even in .svelte extensions? I've tried using this in settings.json, but doesn't work:

"emmet.includeLanguages": {
    "svelte": "html"
}

Answer 1

It really depends on what you want emmet to do for you within Svelte. If you are just looking for html markup shortcuts this will work:

"emmet.includeLanguages": {
        "svelte": "html",
        
    }
}

This will give you the standard emmet for html that you're used to having in an HTML file. It also will not disturb the way your file is read by other extensions.

I would have to tinker a bit more to get it to do more. However if you're looking for Svelte specific functionality checkout the Svelte for VS Code extension. That extension will have a list of features similar to emmet for Svelte specific code blocks, scoped to where they can be used. For instance, between script tags will give you Svelte specific functionality (JS). In the section you would place your HTML, you will get your other blocks including conditionals, animations, etc.