VSCode: Custom keyboard shortcut for Svelte's Emmet expansion does not work

[Ciantic]

Describe the bug Editing Svelte document does not use the same keyboard shortcut for Emmet expansion as other files.

To Reproduce Steps to reproduce the behavior:

Set a custom shortcut for Emmet abbreviation expansion to your shortcuts JSON:

E.g. Ctrl+Enter

  {
    "key": "ctrl+enter",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "editorTextFocus"
  }

Then try to use it e.g. in the HTML document, it should work div.foo + CTRL+Enter becomes <div class="foo"></div>.

However if you try this inside svelte document the entire custom shortcut does not work. Svelte only recognizes tabulator which I don't want to use for Emmet at all.

Expected behavior

Shortcut should work.

System (please complete the following information):

• OS: Windows 10
• IDE: VSCode
• Plugin/Package: Svelte for VSCode 102.0.0

[jasonlyu123]

We didn't use the feature of the emmet extension in the vscode. That won't work.

[Ciantic]

Okay thanks, I actually suspected that. I tried to find alternative keyboard command name (svelte specific Emmet), but couldn't find any. Is that keyboard shortcut hardcoded as tabulator?

E.g. suggestion:

Make command svelte.emmet.expandAbbreviation so I can bind it myself.

[dummdidumm]

I'm not sure if I understand the problem completely. The shortcut should expand the abbreviation after you have typed something but are not in a autocompletion context. If you are in a autocompletion context, tab/enter will do the completion. If you are not in such a context, I cannot expand the abbreviation at all at the moment - which is what we would need to add support for.

[dummdidumm]

You could try to treat Svelte as HTML in the emmet settings: "emmet.includeLanguages": { "svelte": "html" }. Does this work as expected for you then?

[brunobely]

Sharing what I did:

I had "emmet.includeLanguages": { "svelte": "javascriptreact" } set from a previous configuration (I think one or two years ago, and I think it worked back then. Now it doesn't but changing it to "emmet.includeLanguages": { "svelte": "html" } fixes the issue.

[Ciantic]

Hmm, in my case I want two different shortucts:

• Tab for normal autocompletion
• Ctrl+Enter for Emmet

With normal JSX/HTML VSCode this is possible, because they are separate commands. With Svelte last time I tried the emmet was embedded in the auto-complete.

[fxcie]

Hmm, in my case I want two different shortucts:

• Tab for normal autocompletion
• Ctrl+Enter for Emmet

With normal JSX/HTML VSCode this is possible, because they are separate commands. With Svelte last time I tried the emmet was embedded in the auto-complete.

Instead of Ctrl-Enter, could you use Ctrl-Shift-G for wrap with abbreviation in VSCode? I seem to have it set up that way. I might have customized it myself some time ago though. Not sure.

[Ciantic]

@fxcie that's yet another shortcut, wrap with abbreviation is different command.

To sum it up, I use this kind of setup on all the other files, e.g. TSX/JSX/HTML:

1. Tab = auto-complete (TypeScript / JavaScript functions, symbols etc.)
2. Ctrl + Enter = expand emmet e.g. div.foo => <div class="foo"></div>
3. Ctrl + Shift + Enter = wrap with abbrevation, select a text and then ctrl+shift+enter to opens up the wrap dialog.

I don't want the emmet to ruin Tab key completions, because emmet abbreviations are shoddy guesses, I like my tab key to do precisely symbol auto-completion. This is about muscle memory, if I have to look at the auto-completion list if it's a) emmet abbreviation or b) TS/JS symbol, it slows me down.

[jasonlyu123]

As I remembered, at the time when the issue was created. The "emmet.includeLanguages": { "svelte": "html" } config doesn't include emmet for CSS inside style tag. But it seems to be fixed in vscode 1.55 back in March. Also, we have added configs to disable emmet completion in CSS and HTML respectively. So you can just disable the emmet included in the svelte extension and use the build-in emmet extension now.

Here're the mentioned configs:

{
    "emmet.includeLanguages": {
        "svelte": "html"
    },
    "svelte.plugin.css.completions.emmet": false,
    "svelte.plugin.html.completions.emmet": false
}

[jasonlyu123]

Closing due to inactive and have a workaround.