sveltejs / language-tools

The Svelte Language Server, and official extensions which use it
MIT License
1.24k stars 198 forks source link

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

Closed Ciantic closed 1 year ago

Ciantic commented 4 years ago

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):

jasonlyu123 commented 4 years ago

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

Ciantic commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

Hmm, in my case I want two different shortucts:

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 commented 3 years ago

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 commented 3 years ago

@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 commented 2 years ago

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 commented 1 year ago

Closing due to inactive and have a workaround.