Key binding to wrap a selection with an html tag in VSCode

Question

Is there a default key binding in VSCode to wrap a selection in an HTML tag like the keyboard shortcut Shift+alt+W in Visual studio 2015? I could not find anything similar in documentation or in the default keyboard shortcuts that indicates its availability out of the box.

Answer 1

To automate this go to.

File > Preferences > Keyboard Shortcuts

and add this into your keybindings.json (right hand side window)

{
    "key": "ctrl+shift+enter",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
}

You can replace ctrl+shift+enter with your own key combination.

Answer 2

you can use this extension: https://github.com/Microsoft/vscode-htmltagwrap

or you can:

1. open the Command Palette: Command/Control+Shift+P (⇧⌘P)
2. type "wrap", then select "Wrap with abbreviation"
3. type the tag you want and press enter