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

535 Views Asked by At

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?

1

There are 1 best solutions below

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