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.

score 47 · Accepted Answer · edited Oct 05 '18 at 20:27

47

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.

edited Oct 05 '18 at 20:27

Kafnod

46
1
10

answered Feb 24 '17 at 08:50

Zgr3doo

1,765
17
20

5

That's true! You can also use the command palette (ctrl+shift+p) and write "emmet wrap" and then autocompletion will show you the command. I am using the command palette quite a lot lately when I don't want to bind any key to a command – flyer88 Oct 19 '17 at 15:34
2

Is it possible to specify the tag in the keybinding? e.g., ...? – Fuhrmanator Feb 02 '18 at 15:38

score 6 · Answer 2 · answered Sep 30 '16 at 21:03

6

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

or you can:

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

answered Sep 30 '16 at 21:03

Victor

129
1
7

This extension allows redefining the default tag (saves some key strokes for me), e.g., for `...` use `"htmltagwrap.tag": "code"` – Fuhrmanator Feb 02 '18 at 15:45
As of 2021/1/25, the vscode-htmltagwrap extension was last updated in 2016. I think you'll have better luck with [Emmet](https://code.visualstudio.com/docs/editor/emmet) which is built in to VS Code. See [this sibling answer](https://stackoverflow.com/a/42434314/109618). – David J. Jan 25 '21 at 15:25

score 1 · Answer 3 · edited Jul 14 '19 at 10:48

1

Or simply search for the HTMLtagwrap extension in VScode, Make selection. Then use Alt + W. Then enter the new tag.

edited Jul 14 '19 at 10:48

double-beep

5,031
17
33
41

answered Jul 14 '19 at 10:12

Adebola

549
1
7
11

As of 2021/1/25, the vscode-htmltagwrap extension was last updated in 2016. I think you'll have better luck with [Emmet](https://code.visualstudio.com/docs/editor/emmet) which is built in to VS Code. See [this sibling answer](https://stackoverflow.com/a/42434314/109618). – David J. Jan 25 '21 at 15:26

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

3 Answers3

Linked