Search code examples
visual-studio-codekeyboard-shortcutskey-bindingsvscode-keybinding

How to keybind specific Emmet wrap with abbreviation commands in VS Code?


I have been using the Emmet Wrap with Abbreviation recently and am looking for ways to streamline my process. In particular I am looking for a way to add keybinds for particular Warp abbreviations.

The current process is receiving a plain text sheet of content and then adding HTML structure to it (ie: headings, p tags, divs, anchor tags etc.). Emmet Wrap with Abbreviations are great for this as I can just select the text I want formatted and use the abbreviation to quickly format it, however it would be better if there is some way to add key binds to commonly used elements.

Some examples:

  • an anchor tag keybind that uses: a[title][target=_blank]
  • an unordered list keybind that uses: ul>li*

Through looking for keybind info in VS Code I know you can add custom keyboard shortcuts by editing the keybindings.json file in your user settings. But, I can't figure out how to activate the Emmet Wrap with Abbreviations shortcut and then auto-fill the specific abbreviation I want to use.
Currently my general binding for Wrap with Abbreviation is:

{
   "key": "shift+alt+w",
   "command": "editor.emmet.action.wrapWithAbbreviation"
}

How can I add a Keybinding to VS Code, so that when I hit the bound button it runs the Wrap with Abbreviation command with a specific abbreviation?


Solution

  • {
        "key": "ctrl+shift+e",
        "command": "editor.emmet.action.wrapWithAbbreviation",
        "when": "editorHasSelection",
        "args": {
            "abbreviation": "li*",
        }
    }