question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
dummdidummcommented, Oct 13, 2020

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

0reactions
jasonlyu123commented, Nov 4, 2021

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
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

VS Code Emmet shortcut key(tab or any other key) does not ...
The shortcut key does not work but going through the menu option works. Edit -> Expand Emmet Abbreviation. Am i missing something? I...
Read more >
Emmet not working in VS Code ?— Here's how you can fix this ...
Click on the Settings or press Ctrl+, to open the VS Code Settings. Step 2: Click on the Extensions tab on the left...
Read more >
Emmet Keybindings - Visual Studio Marketplace
Improve your productivity through new keyboard shortcuts for Emmet. ... Launch VS Code Quick Open ( Ctrl+P ), paste the following command, and ......
Read more >
Html basic structure shortcut doesn't work : r/vscode - Reddit
The JSON key is the emmet shortcut. Hence if i type ! + tab i get my own custom html boilerplate. Note: It...
Read more >
svelte-language-server - npm
When using the VS Code extension, you can set these through the settings ... The language server also accepts configuration for Emmet (key: ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found